删除下拉链接并在导航栏菜单中显示其所有项目

Question

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

在那里我有一些链接和下拉菜单.当我将浏览器的大小调整为768px或更低时,它会转换为一种新的导航菜单.

这一切都开箱即用,但我想要的是下拉菜单也扩展了.

现在发生的事情是下拉菜单仍然崩溃.当我打开它,然后在该菜单容器内创建一个我真的不喜欢的滚动条.

这是我的意思截图:

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

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

Answer 1

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

1.滚动条

默认情况下,下拉菜单的固定(最大)高度为340px(溢出-y:auto,另请参阅:Twitter bootstrap 3导航栏导航栏右侧导航栏折叠).

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

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

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

2.崩溃时打开dropmenu

在第一眼看到你应该在崩溃时向dropmenu添加一个开放类,但是dropdown.js的clearmenus函数将删除这个类.添加display:block将显示下拉菜单,但其状态/显示将像非折叠一样.

一个解决方案是添加一个类与类相同的open类,不会被clearmenus删除.

  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
  $('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
  });

要为打开的类提供与open类相同的样式,您需要更改.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;}
}

下拉列表中链接的样式

您的导航栏导航栏使用逆样式它(另见:/sf/ask/1325545021/#18936358)导航栏逆将被定义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