Bootstrap 3 导航栏

Question

有没有办法增加 bootstrap 3 导航栏折叠的点（即它折叠成纵向平板电脑上的下拉菜单）？

这两个适用于 bootstrap 2，但现在不适用！

How to change navbar collapse threshold using Twitter bootstrap-responsive?

Change the default responsive navbar breakpoint

Answer 1

Bootstrap 2 和 Bootstrap 3 的最大区别在于 Bootstrap 3 是“移动优先”。

这意味着默认样式是为移动设备设计的，在导航栏的情况下，这意味着它默认“折叠”并在达到某个最小尺寸时“展开”。

Bootstrap 3 的网站实际上有一个关于做什么的“提示”： http://getbootstrap.com/components/#navbar

自定义折叠点

根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询。

如果您要重新编译 LESS，您会在 variables.less 文件中找到注明的 LESS 变量。它目前设置为“扩展”@media (min-width: 768px)，这是 Bootstrap 3 术语中的“小屏幕”（即平板电脑）。

@grid-float-breakpoint: @screen-tablet;

如果你想让折叠的时间长一点，你可以像这样调整它：

@grid-float-breakpoint: @screen-desktop;（992px 断点）

或早点扩展

@grid-float-breakpoint: @screen-phone（480px 断点）

如果您希望稍后扩展它，而不是处理重新编译 LESS，您必须覆盖在 768px 媒体查询中应用的样式，并让它们返回到以前的值。然后在适当的时候重新添加它们。

我不确定是否有更好的方法。根据您的需要重新编译 Bootstrap LESS 是最好（最简单）的方法。否则，您必须找到所有影响导航栏的 CSS 媒体查询，将它们覆盖为默认样式 @ 768px 宽度，然后将它们恢复为更高的最小宽度。

只需更改变量，重新编译 LESS 即可为您带来所有神奇的效果。这几乎是 LESS/SASS 预编译器的重点。 =)

（注意，我确实把它们都查了一遍，大约有 100 行代码，这让我很恼火，我放弃了这个想法，只是为给定的项目重新编译 Bootstrap，避免意外搞砸)

希望对你有帮助！

干杯！

Answer 2

Easiest way is to customize bootstrap

查找变量：

 @grid-float-breakpoint

设置为@screen-sm，你可以根据自己的需要进行更改。 希望对您有所帮助！

Answer 3

nabvar 在小型设备上会崩溃。折叠点由变量中的@grid-float-breakpoint 定义。默认情况下，这将在 768px 之前。对于屏幕宽度低于 768 像素的屏幕，导航栏将如下所示：

可以更改 variables.less 中的 @grid-float-breakpoint 并重新编译 Bootstrap。这样做时，您还必须在 navbar.less 中更改 @screen-xs-max。您必须将此值设置为新的@grid-float-breakpoint -1。另请参阅：https://github.com/twbs/bootstrap/pull/10465。这也是将@grid-float-breakpoint 处的导航栏表单和下拉菜单更改为其移动版本所必需的。

Answer 4

我在安装 Bootstrap 3.0.0 时采用了 CSS 方式，因为我对 LESS 不太熟悉。这是我添加到自定义 css 文件（我在 bootstrap.css 之后加载）中的代码，它允许我进行控制，因此菜单始终像 accordion 一样工作。
注意：我将整个navbar 包裹在一个带有sidebar 类的div 中，以分离出我想要的行为，这样它就不会影响我网站上的其他导航栏，比如主菜单。根据您的需要进行调整，希望对您有所帮助。

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

附加说明：我还对主菜单navbar 的切换进行了更改（因为我网站上的上述代码用于侧面的“子菜单”。

我变了：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

进入：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

然后也调整了：

<div class="navbar-collapse collapse navbar-collapse">

进入：

<div class="navbar-collapse collapse navbar-collapse-topmenu">

如果您只有一个navbar，我想您不必担心这一点，但它对我的情况有所帮助。

Answer 5

我想对 jmbertucci 的回答进行投票和评论，但我还没有得到控件的信任。我也遇到了同样的问题，按照他说的解决了。如果您使用的是 Bootstrap 3.0，请在 variables.less 中编辑 LESS 变量 响应断点设置在第 200 行附近：

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

然后在第 232 行使用 @grid-float-breakpoint 变量设置导航栏的折叠值。默认情况下，它设置为 @screen-tablet 。如果您愿意，可以使用像素值，但我更喜欢使用 LESS 变量。

Answer 6

我今天也遇到了同样的问题。

引导程序 4

这是一个原生功能：https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

你必须使用.navbar-expand{-sm|-md|-lg|-xl} 类：

<nav class="navbar navbar-expand-md navbar-light bg-light">

引导程序 3

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

只需将991px 更改为1199px 即可获得md 的大小。

Demo

Answer 7

对于那些想要以小于标准 768px 的宽度 折叠（以小于 768px 的宽度展开）的人，这就是所需的 css：

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Answer 8

我想我找到了一个简单的解决方案来更改折叠断点，仅通过 css。

希望其他人能确认一下，因为我没有彻底测试它，我不确定这个解决方案是否有副作用。

您必须更改以下类定义的媒体查询值：

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

这在我当前的项目中对我有用，但我仍然需要更改一些 css 定义以正确排列所有屏幕尺寸的菜单。

希望这会有所帮助。

Answer 9

这些都是在变量中控制的，无需在源代码中乱七八糟。使用引导程序，首先尝试变量，然后覆盖。然后返回并再次尝试变量；）

我使用 bootstrap-sass 和 rails，但它与默认的 LESS 相同。

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

就是这样！这个变量参考页面非常方便：https://github.com/twbs/bootstrap/blob/master/less/variables.less

Answer 10

感谢 Seb33300，我得到了这个工作。但是，似乎缺少了一个重要部分。至少在 Bootstrap 版本 3.1.1 中。

我的问题是导航栏以正确的宽度相应折叠，但菜单按钮不起作用。我无法展开和折叠菜单。

这是因为 collapse.in 类被 .navbar-collapse.collapse 中的 !important 覆盖了，也可以通过添加“collapse.in”来解决。 Seb33300 的示例完成如下：

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Answer 11

我担心自定义 Bootstrap 之后的维护和升级问题。我今天可以记录自定义步骤，并希望三年后升级 Bootstrap 的人能找到文档并重新应用这些步骤（那时可能会或可能不会工作）。我想，无论哪种方式都可以提出论点，但我更喜欢在我的代码中保留任何自定义。

不过，我不太明白 Seb33300 的方法是如何工作的。它当然不适用于 Bootstrap 4.0.3。为了使导航栏在 1200 而不是 768 处展开，必须覆盖两个媒体查询的规则，以防止在 768 处展开并强制在 1200 处展开。

我有一个更长的菜单，可以在 iPad 上以纵向模式包装。 以下使菜单保持折叠直到 1200 断点：

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Answer 12

如果您遇到的问题是菜单分成多行，您可以尝试以下方法之一：

1) 尽量减少菜单项的数量或长度，例如删除菜单项或缩短字词。

2) 减少菜单项之间的填充，如下所示：

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

默认内边距为两边（左右）15px。

如果您希望更改每个单独的侧面使用：

padding-left: 7px; 
padding-right: 8px;

此设置也会影响下拉列表。

这并不能回答问题，但它可以帮助那些不想弄乱 CSS 或使用 LESS 变量的人。解决这个问题的两种常用方法。