Wählen Sie den Eingang nicht gruppieren zu anderen Eingängen

Question

Grundsätzlich ist das Problem, dass ich versuche, alle drei dieser Eingänge zu gruppieren, so dass es eine lange verbundene Form ist. Jedoch das Problem, das ich erfahre, ist, dass der auserwählte Eingang nicht zum Rest des Formulars korrekt ist, gibt es etwas, das ich falsch mache.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <div class="input-group"> 
 
      <div class="form-group"> 
 
        <select class="form-control" id="sel1"> 
 
          <option>1</option> 
 
          <option>2</option> 
 
          <option>3</option> 
 
          <option>4</option> 
 
        </select> 
 
       </div> 
 

 
     <input type="text" class="form-control"> 
 
     <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-search" aria-hidden="true"> 
 
     </span></span> 
 

 
     </div>

So ist die Ausgabe, die ich bin auf der <select> verwandt ist und im Wesentlichen, was ich versuche zu erreichen, die für die obige Form ähnlich wie diese aussehen; mit dem ersten ausgegrauten Bereich als Auswahl- und dem zweiten ausgegrauten Bereich als Suchsymbol.

Answer 1

Versuchen Sie, mit dem dropdown-menu Komponente

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <div class="input-group-btn"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
     <li><a href="#">4</a></li> 
 
    </ul> 
 
    </div> 
 
    <input type="text" class="form-control" aria-label="..."> 
 
    <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-search" aria-hidden="true"> 
 
     </span></span> 
 
</div>