wie Bootstrap-Drop-Down zu machen, die gesamte Spalte Breite

Question

standardmäßig Dropdown auf Bootstrap dynamisch basierend zu füllen auf der Länge des Textes des gewählten Elements. Dies wird die Harmonie meines Layouts durchbrechen und ich kann keine Lösung finden.

Grundsätzlich möchte ich eine Zeile eine Sucheingabe und auf der rechten Seite ein Dropbox enthält. Etwas sehr einfaches ... Wie macht man das möglich?

<div class="container-fluid"> 
<div class="row" id="searchAndLogin"> 
    <div class="col-md-9"> 
     <div class="input-group"> 
      <input type="text" class="form-control"> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Go!</button> 
      </span> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default">Action</button> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
      <span class="caret"></span> 
      <span class="sr-only">Toggle Dropdown</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

Sie die Breite der btn-group einstellen und seine btn Elemente sowie die dropdown-menu die Breite des Spalts Sie es platzieren passen.

CSS

#searchAndLogin .btn-group {width:100%;} 
#searchAndLogin .btn-group .btn {width:90%;} 
#searchAndLogin .btn-group .btn.dropdown-toggle {width:10%;} 
#searchAndLogin .btn-group .dropdown-menu {width:100%;} 

Live-Beispiel hier: http://www.bootply.com/WPhb5tLZmh