在Bootstrap 3.0中设置下拉列表的宽度 [英] Setting the width of a dropdown list in Bootstrap 3.0

问题描述

如何将bootstrap 3.0中的下拉触发按钮的宽度设置为等于下拉列表的宽度？与使用引导选择（ http://silviomoreto.github.io/bootstrap-select/ ）类似）。我试图把整个列表包装在一个div与col- *类，但是似乎不工作：

 < div class =row> 
< div class =col-xs-4 col-md-4> 
< div class =dropdown> 
< button type =buttonclass =btn btn-danger dropdown-toggledata-toggle =dropdown> Button< / button> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>动作< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  
 
 
 
 
 
 
 
按钮宽度=下拉菜单列表= col- *宽度。
解决方案
我找到了解决方案通过设置下拉菜单和按钮宽度= 100％。
  .dropdown菜单{
 width：100％; 
} 
 
 .btn {
 width：100％; 
} 
  
现在，按钮和下拉列表具有相同的宽度， 
 
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.
解决方案
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.

                        
这篇关于在Bootstrap 3.0中设置下拉列表的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！