jQuery 增加引导下拉菜单宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23042182/
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
Increase bootstrap dropdown menu width
提问by ChoclateLove
wondering if anyone has any tips on how to increase the dropdown width?
想知道是否有人对如何增加下拉宽度有任何提示？
I have a row containing two columns with a a bit of javascript that slides the dropdown up and down when selected. The problem I am having is that I can't seem to figure how to increase the dropdown width when selected, ideally the dropdown would match the column size. But what is happening is that the dropdown width is only the same size as the text within the dropdown does anyone have a suggestion on how to increase the dropdown width to match the column size?
我有一行包含两列，其中包含一些 javascript，可以在选择时上下滑动下拉列表。我遇到的问题是我似乎无法弄清楚如何在选择时增加下拉宽度，理想情况下下拉列表将与列大小匹配。但是发生的事情是下拉宽度仅与下拉列表中的文本大小相同是否有人建议如何增加下拉宽度以匹配列大小？
<div class="row question">
<div class="dropdown">
<div class="col-md-6" data-toggle="dropdown">
First column
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
</ul>
</div>
</div><!-- end of the dropdown -->
<div class="dropdown">
<div class="col-md-6" data-toggle="dropdown">
second column
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
</ul>
</div>
</div>
</div><!--end of the row question -->
<script>
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
</script>
采纳答案by Chuks
Add the following css class
添加以下css类
.dropdown-menu {
width: 300px !important;
height: 400px !important;
}
Of course you can use what matches your need.
当然，您可以使用符合您需要的。
回答by Zim
Update 2018
2018 年更新
You should be able to just set it using CSS like this..
您应该可以像这样使用 CSS 设置它。
.dropdown-menu {
min-width:???px;
}
This works in both Bootstrap 3 and Bootstrap 4.0.0 (demo).
这适用于 Bootstrap 3 和Bootstrap 4.0.0 (demo)。
A no extra CSSoption in Bootstrap 4is using the sizing utilsto change the width. For example, here the w-100(width:100%) class is used for the dropdown menu to fill the width of it's parent....
一个没有额外的CSS中的选项引导4使用尺寸utils的改变宽度。例如，这里w-100(width:100%) 类用于下拉菜单以填充其父级的宽度....
<ul class="dropdown-menu w-100">
<li><a class="nav-link" href="#">Choice1</a></li>
<li><a class="nav-link" href="#">Choice2</a></li>
<li><a class="nav-link" href="#">Choice3</a></li>
</ul>
回答by Rich
You can for example just add a "col-xs-12" class to the <ul>which holds the list items:
例如，您可以将“col-xs-12”类添加到<ul>保存列表项的类：
<div class="col-md-6" data-toggle="dropdown">
First column
<ul class="dropdown-menu col-xs-12" role="menu" aria-labelledby="dLabel">
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
<li>Insert your menus here</li>
</ul>
</div>
This worked ok on any screen resolution in my site. The class will match the list width to it's containing div I believe:
这在我网站的任何屏幕分辨率上都可以正常工作。该类会将列表宽度与其包含的 div 相匹配，我相信：
回答by Binh Nguyen
Usually we have the need to control the width of the dropdown menu; specially that's essential when the dropdown menu holds a form, e.g. login form --- then the dropdown menu and its items should be wide enough for ease of inputing username/email and password.
通常我们需要控制下拉菜单的宽度；特别是当下拉菜单包含一个表单时，例如登录表单——那么下拉菜单及其项目应该足够宽，以便于输入用户名/电子邮件和密码。
Besides, when the screen is smaller than 768px or when the window (containing the dropdown menu) is zoomed down to smaller than 768px, Bootstrap 3 responsively scales the dropdown menu to the whole width of the screen/window. We need to keep this reponsive action.
此外，当屏幕小于 768px 或窗口（包含下拉菜单）缩小到小于 768px 时，Bootstrap 3 响应式地将下拉菜单缩放到屏幕/窗口的整个宽度。我们需要保持这个响应动作。
Hence, the following css class could do that:
因此，以下 css 类可以做到这一点：
@media (min-width: 768px) {
.dropdown-menu {
width: 300px !important; /* change the number to whatever that you need */
}
}
(I had used it in my web app.)
（我曾在我的网络应用程序中使用过它。）
回答by Norman Huth
Text will never wrap to the next line. The text continues on the same line until a
tag is encountered.
文本永远不会换行到下一行。文本在同一行上继续，直到
遇到标记。
.dropdown-menu {
white-space: nowrap;
}
回答by dpwrussell
Usually the desire is to match the menu width to the width of the dropdown parent. This can be achieved easily like so:
通常希望将菜单宽度与下拉父项的宽度相匹配。这可以像这样轻松实现：
.dropdown-menu {
width:100%;
}
回答by AHT
If you have BS4 another option could be:
如果您有 BS4，另一种选择可能是：
.dropdown-item {
width: max-content !important;
}
.dropdown-menu {
max-height: max-content;
max-width: max-content;
}
