css - 删除下 zipper 接并在导航栏菜单中显示其所有元素

Question

我正在使用 Twitter Bootstrap 及其对顶部典型 Twitter Bootstrap 导航栏菜单的响应式设计。

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

开箱即用，一切正常，但我想要的是下拉菜单也已展开。

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

这是我的意思的截图:

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

我怎样才能删除打开/关闭 Dropdown 链接，并将其所有元素列在该菜单中，这样它就不会在菜单侧面创建一个丑陋的滚动条？

Answer 1

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

1。滚动条

默认情况下，下拉菜单的固定(最大)高度为 340 像素(以及 overflow-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;
}
}

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

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。删除下 zipper 接

在 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