Bootstrap 3导航栏折叠

是否有任何方法可以增加bootstrap 3导航栏折叠的位置（即，使其在肖像平板电脑上折叠成一个下拉列表）？

这两个适用于引导程序2，但现在不适用！

如何使用Twitter引导响应式更改导航栏折叠阈值？

更改默认的响应式导航栏断点

我今天有同样的问题。

引导程序4

它是本机功能：https : //getbootstrap.com/docs/4.0/components/navbar/#sensitive-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尺寸。

演示版

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

这意味着默认样式是为移动设备设计的，对于Navbars而言，这意味着默认样式是“折叠”的，当达到某个最小尺寸时会“扩展”。

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。否则，您将必须找到影响Navbar的所有CSS媒体查询，将其覆盖为默认样式@ 768px宽度，然后以更高的最小宽度将其还原。

仅通过更改变量，重新编译LESS即可为您完成所有操作。这几乎是LESS / SASS预编译器的重点。=）

（请注意，我确实将它们全部查找了一下，大约有100行代码，这足以让我放弃这个主意，只是重新编译给定项目的Bootstrap并避免无意中弄乱了它们）

希望对您有所帮助！

干杯!

最简单的方法是自定义引导程序

查找变量：

 @grid-float-breakpoint

设置为@ screen-sm，您可以根据需要进行更改。希望能帮助到你！

这些都是由变量控制的，无需在源头上乱搞。使用引导程序，请先尝试变量，然后覆盖。然后返回并再次尝试变量;）

我用的是带有轨的bootstrap-sass，但是默认的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

多亏了Seb33300，我才能完成这项工作。但是，似乎缺少重要的部分。至少在Bootstrap版本3.1.1中。

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

这是因为.navbar-collapse.collapse中的！important覆盖了crash.in类，可以通过添加“ 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;
    }
}

我想对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变量。

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

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变量的人。解决此问题的两种常用方法。

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上的下拉菜单更改为其移动版本。

我担心自定义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; }
}

我对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我想您不必为此担心，但这对我而言很有帮助。

对于那些想要以小于标准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;
}
}

我想我找到了一种仅通过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定义，以适合所有屏幕尺寸的菜单。

希望这可以帮助。