Setting the width of a dropdown list in Bootstrap 3.0

Question

How can I set the width of a dropdown triggering button in bootstrap 3.0 to be equal to the width of the dropdown list? Similar to what is achieved when using bootstrap-select (http://silviomoreto.github.io/bootstrap-select/). I have tried to wrap the whole list in a div with a col-* class, but that doesn't seem to work:

<div class="row"> <div class="col-xs-4 col-md-4">     <div class="dropdown">       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>           <ul class="dropdown-menu" role="menu">             <li><a href="#">Action</a></li>             <li><a href="#">Action</a></li>             <li><a href="#">Action</a></li>           </ul>     </div> </div> 

Thus, I would like: button width = dropdown menu list = col-* width.

Answer 1

I found the solution by setting the dropdown-menu and button width=100%.

.dropdown-menu {   width: 100%;  }  .btn{  width: 100%; } 

Now both the button and dropdown list have the same width, controlled by the column width.

Answer 2

If I understand correctly you want to style the menu width according to the larger option you have to override the min-width property of the .dropdown-menu list like:

.dropdown-menu {     min-width: 0px !important; } 

Demo: http://jsfiddle.net/faxyz/4/