问题描述
如何将bootstrap 3.0中的下拉触发按钮的宽度设置为等于下拉列表的宽度?与使用引导选择()类似)。我试图把整个列表包装在一个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中设置下拉列表的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!