title: how to make bootstrap dropdown to fill the entire col width
body: <p>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. </p>
  
  <p>Basically I want a row containing a search input and on the right side a dropbox. Something very simple...How to make this possible ?</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row" id="searchAndLogin"&gt;
     &lt;div class="col-md-9"&gt;
         &lt;div class="input-group"&gt;
            &lt;input type="text" class="form-control"&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;
            &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
         &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-default"&gt;Action&lt;/button&gt;
            &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;
              &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
            &lt;/button&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>