javascript - 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.

question from:https://stackoverflow.com/questions/18590929/setting-the-width-of-a-dropdown-list-in-bootstrap-3-0

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.