how to make bootstrap dropdown to fill the entire col width

Question

By default, dropdown on bootstrap are dynamic based on the length of the text of the selected item. This will break the harmony of my layout and I can't find a solution.

Basically I want a row containing a search input and on the right side a dropbox. Something very simple...How to make this possible ?

<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

You can set the width of the btn-group and its btn elements as well as the dropdown-menu to fit the width of the column you place it on.

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 example here: http://www.bootply.com/WPhb5tLZmh