我将 Twitter Bootstrap 及其响应式设计用于顶部的典型 Twitter Bootstrap 导航栏菜单。
在那里我有几个链接和一个下拉菜单。当我将浏览器的大小调整为768px 或更少时，它会变成一种新的导航菜单。
这一切开箱即用，但我想要的是下拉菜单也被展开。
现在发生的情况是下拉菜单仍处于折叠状态。当我打开它时，它会在该菜单容器中创建一个我真的不喜欢的滚动条。
这是我的意思的截图：
示例：http://getbootstrap.com/examples/jumbotron/
如何删除打开/关闭Dropdown 链接，并将其所有项目列在该菜单中，以免在菜单一侧创建难看的滚动条？
【问题讨论】：
标签： css twitter-bootstrap twitter-bootstrap-3
你可以把你的问题分成三个部分：
默认情况下，下拉菜单的固定（最大）高度为 340 像素（并且溢出-y:auto，另请参见：Twitter bootstrap 3 navbar navbar-right outside navbar-collapse）。
您可以撤消此最大高度，方法是从 navbar.less 中删除它（第 52 行 max-height: 340px;）并重新编译 Bootstrap。或者在你的文档中在 Bootstrap 的 css 之后添加一些 css：
@media(max-width:767px)
{
.navbar-collapse {
max-height: none;
}
}
请注意，当菜单的高度变为屏幕的高度时，由于导航栏的位置固定，您无法滚动内容。
乍一看，您应该在折叠时向下拉菜单添加一个开放类，但 dropdown.js 的 clearmenus 功能会删除该类。添加 display:block 会显示下拉菜单，但它的状态 /display 会像非折叠一样。
一种解决方案是添加一个与open 类具有相同样式的类，该类不会被clearmenus 删除。
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
$('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
});
要使打开的类与打开的类具有相同的样式，您需要更改 .less 文件并在之后重新编译 Bootstrap。
// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {
// 下拉菜单的打开状态 .opened, .open {
在撤消折叠后下拉菜单保持可见（通过调整屏幕大小）以防止在 Bootstrap 的 CSS 之后添加一些 css（您也可以将其添加到您的 Less 文件中）：
@media(min-width:768px)
{
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}
您的导航栏使用 navbar-inverse 设置样式（另请参阅：https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358） Navbar-inverse 也将在 navbar.less 中定义。要为 opend 类设置链接颜色，请使用：
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu, .opened .dropdown-menu {
Bootstrap的CSS之后的css：
@media(max-width:767px)
{
.nav > li > a.dropdown-toggle{display:none;}
}
【讨论】：
对于在移动/小分辨率上默认打开的下拉菜单，
这是另一种使用 jquery 的方法，它不涉及使用更少的代码或 css。
【讨论】：