試圖從亞馬遜網站實現搜索欄外觀

Question

<div class="input-group"> 
<select class="input-group-addon"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

<input id="email" type="text" class="form-control" name="email" placeholder="Email"> 

<button class="input-group-addon">Submit</button> 
</div> 

有人可以幫助我實現這一目標嗎？

我只是完全喪失和困惑，爲什麼這是我得到

http://codepen.io/jpezninjo/pen/bgVyZp

Answer 1

試試這個

select { 
 
    background: transparent; 
 
    border: none; 
 
    padding: 6px 12px; 
 
} 
 
button { 
 
    padding: 6px 12px; 
 
    background: transparent; 
 
    border: none; 
 
} 
 
.input-group-addon { 
 
    padding: 0!important; 
 
}

<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-2"></div> 
 
    <div class="col-md-8"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
     <select> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
    </select> 
 
    </span> 
 

 
     <input id="email" type="text" class="form-control" name="email" placeholder="Email"> 
 

 
     <span class="input-group-addon"> <button>Submit</button></span> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-2"></div> 
 
</div>

Answer 2

更新...

使用引導程序。你可以試試這個。不需要任何CSS樣式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row">  
 
     <div class="col-xs-8 col-xs-offset-2"> 
 
\t \t  <div class="input-group"> 
 
       <div class="input-group-btn search-panel"> 
 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 
        \t <span id="search_concept">All</span> <span class="caret"></span> 
 
        </button> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#contains">test1</a></li> 
 
         <li><a href="#its_equal">test2</a></li> 
 
         <li><a href="#greather_than">test3</a></li> 
 
         <li><a href="#less_than">test4</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#all">test5</a></li> 
 
        </ul> 
 
       </div> 
 
       <input type="hidden" name="search_param" value="all" id="search_param">   
 
       <input type="text" class="form-control" name="x" placeholder="Search term..."> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
 
       </span> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</div>