Html 在 Bootstrap 3.0 中设置下拉列表的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18590929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting the width of a dropdown list in Bootstrap 3.0
提问by graphmeter
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:
如何将 bootstrap 3.0 中下拉触发按钮的宽度设置为等于下拉列表的宽度？与使用 bootstrap-select ( http://silviomoreto.github.io/bootstrap-select/)时实现的类似。我试图用 col-* 类将整个列表包装在一个 div 中，但这似乎不起作用：
<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.
因此，我想：按钮宽度 = 下拉菜单列表 = col-* 宽度。
回答by graphmeter
I found the solution by setting the dropdown-menu and button width=100%.
我通过设置下拉菜单和按钮宽度=100% 找到了解决方案。
.dropdown-menu {
width: 100%;
}
.btn{
width: 100%;
}
Now both the button and dropdown list have the same width, controlled by the column width.
现在按钮和下拉列表具有相同的宽度，由列宽控制。
回答by Irvin Dominin
If I understand correctly you want to style the menu width according to the larger option you have to override the min-widthproperty of the .dropdown-menulist like:
如果我理解正确，您想根据较大的选项设置菜单宽度的样式，您必须覆盖列表的min-width属性，.dropdown-menu例如：
.dropdown-menu {
min-width: 0px !important;
}
回答by Ben Besuijen
You can set the width of .dropdown-toggle.I recommend to use text-overflowellipsis when the dropdown becomes too small. It's not necessary to style .dropdown-menu. You can set the width of the dropdown to any other value if you want to use it in .input-groupor not in the grid.
当下拉列表变得太小时，您可以设置.dropdown-toggle.我建议使用text-overflow省略号的宽度。没有必要设置样式.dropdown-menu。如果您想.input-group在网格中使用或不在网格中使用它，您可以将下拉列表的宽度设置为任何其他值。
.dropdown-toggle {
overflow: hidden;
padding-right: 24px /* Optional for caret */;
text-align: left;
text-overflow: ellipsis;
width: 100%;
}
/* Optional for caret */
.dropdown-toggle .caret {
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
回答by partypete25
I came here looking for a solution to a similar problem, although in my case the dropdown wasn't within a col div. I wanted the dropdown button to match the width of the dropdown list, dependant on the content width of whichever was wider, similar to a select dropdown. If anyone is looking for a similar solution here it is:
我来这里是为了寻找类似问题的解决方案，尽管在我的情况下，下拉列表不在 col div 内。我希望下拉按钮与下拉列表的宽度相匹配，取决于较宽的内容宽度，类似于选择下拉列表。如果有人在这里寻找类似的解决方案，那就是：
.dropdown-container {
float:right;
height:60px;
}
.position-dropdown-controller {
position: absolute;
right:0;
}
.dropdown-toggle,
.dropdown-menu {
width: 100%;
min-width: 0;
}
.dropdown-toggle {
text-align: right;
}
.dropdown-menu {
height: 0;
text-align: center;
display: block !important;
visibility: hidden;
position: relative;
float: none;
}
.open .dropdown-menu {
display: block !important;
visibility: visible;
height: auto;
}
<div class="dropdown-container">
<div class="position-dropdown-controller">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
...
</ul>
</div>
</div>
</div>
In this example I wanted the dropdown floated to the right, but it can just as easily be tweaked to work however you like.
在这个例子中，我希望下拉菜单向右浮动，但它可以很容易地调整到你喜欢的方式。
