Как сделать выпадающее окно бутстрапа, чтобы заполнить всю ширину столбца

Question

По умолчанию выпадающий список загрузочного буфера является динамическим в зависимости от длины текста выбранного элемента. Это нарушит гармонию моего макета, и я не смогу найти решение.

В принципе, я хочу, чтобы строка содержала вход поиска, а с правой стороны - dropbox. Что-то очень простое ... Как это сделать?

<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

Вы можете установить ширину btn-group и его btn элементов, а также dropdown-menu по ширине столбца, поместите его.

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%;} 

Живой пример здесь: http://www.bootply.com/WPhb5tLZmh