graphmeter graphmeter - 7 months ago 191
HTML Question

Setting the width of a dropdown list in Bootstrap 3.0

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

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.

Comments