3

我将 Twitter Bootstrap 及其响应式设计用于顶部的典型 Twitter Bootstrap 导航栏菜单。

在那里我有几个链接和一个下拉菜单。当我将浏览器的大小调整为768px或小于时，它会变成一种新的导航菜单。

这一切都可以很好地开箱即用，但我想要的是下拉菜单也被扩展了。

现在发生的是下拉菜单仍然折叠。当我打开它时，它会在该菜单容器内创建一个我真的不喜欢的滚动条。

这是我的意思的屏幕截图：

在此处输入图像描述

示例： http: //getbootstrap.com/examples/jumbotron/

如何删除打开/关闭Dropdown链接，并将其所有项目列在该菜单中，以便它不会在菜单侧面创建丑陋的滚动条？

4

2 回答 2

7

您可以将问题分为三个部分：

1.滚动条

默认情况下，下拉菜单的固定（最大）高度为 340 像素（以及一个 overflow-y:auto，另请参见：Twitter bootstrap 3 navbar navbar-right outside navbar-collapse）。

max-height: 340px;您可以通过从 navbar.less中删除它（第 52 行）并重新编译 Bootstrap 来撤消此最大高度。或者在您的文档中在 Bootstrap 的 css 之后添加一些 css：

@media(max-width:767px)
{    
.navbar-collapse {
     max-height: none;
}
}

请注意，当菜单的高度变为屏幕的高度时，由于导航栏的位置固定，您无法滚动内容。

2.在折叠时打开下拉菜单

乍一看，您应该在折叠时向下拉菜单添加一个开放类，但 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。

在 navbar.less 中（行：215）

// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {

在 dropdown.less 中（第 119 行）

// 下拉菜单的打开状态 .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 {

3.删除下拉链接

Bootstrap的CSS之后的css：

@media(max-width:767px)
{    
.nav > li > a.dropdown-toggle{display:none;}
}

演示：http: //jsfiddle.net/pgK4y/

另见：https ://github.com/twbs/bootstrap/issues/10758

于 2013-09-22T11:41:39.273 回答
0

对于在移动/小分辨率上默认打开的下拉菜单，
这是另一种使用 jquery 的方法，它不涉及使用更少的代码或 css。

tp://stackoverflow.com/a/23202921/1174172

于 2014-04-21T18:08:33.490 回答