在不使用 LESS 的情况下更改引导导航栏折叠断点答案

【问题标题】：Change bootstrap navbar collapse breakpoint without using LESS在不使用 LESS 的情况下更改引导导航栏折叠断点
【发布时间】：2013-11-18 14:33:13
【问题描述】：

目前，当浏览器宽度降至 768 像素以下时，导航栏会变为折叠模式。我想将此宽度更改为 1000 像素，因此当浏览器低于 1000 像素时，导航栏将更改为折叠模式。我想在不使用 LESS 的情况下做到这一点，我使用的是手写笔而不是 LESS。

我的问题和这个问题一样：Bootstrap 3 Navbar Collapse

但该问题中的所有答案都解释了如何通过更改 LESS 变量来做到这一点。我没有处理过 LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法来完成。

谢谢！

【问题讨论】：

标签： css twitter-bootstrap responsive-design navbar collapse

【解决方案1】：

2018 年更新

引导程序 4

在 Bootstrap 4 中使用 navbar-expand-* 类更容易更改导航栏断点：

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

navbar-expand-sm = xs 屏幕上的移动菜单
navbar-expand-md = sm 屏幕上的移动菜单
navbar-expand-lg = md 屏幕上的移动菜单
navbar-expand-xl = lg 屏幕上的移动菜单
navbar-expand = 从不使用移动菜单
(no expand class) = 始终使用移动菜单

如果您排除navbar-expand-*，移动菜单将使用all 宽度。这是所有 6 个导航栏状态的演示：Bootstrap 4 Navbar Example

您还可以通过添加一点 CSS 来使用自定义断点 (???px)。例如，这里是 1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

**引导程序 3**

对于 Bootstrap 3.3.x，这里是 working CSS 来覆盖导航栏断点。将991px 更改为您希望导航栏折叠的点的像素尺寸...

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

991px 的工作示例：http://www.bootply.com/j7XJuaE5v6
1200px 的工作示例：https://www.codeply.com/go/VsYaOLzfb4（带有搜索表单）

注意：以上内容适用于超过 768 像素的任何内容。如果您需要将其更改为 小于 768px，请使用 example of less than 768px is here。

【讨论】：

当我设置一个高于 768px 的值时，上面的代码可以工作，但是我需要实现相反的效果......我只希望它在 400px 时折叠，但是当我设置这个值时，引导似乎正在拿起原来的 768 - 有什么想法吗？谢谢
虽然这个答案很有魅力，但它与 dropdown menu 很矛盾，也许你需要改进答案。
@AbhishekPandey 我发现this answer 很有用（关于下拉的部分）
这个解决方案对我来说几乎是完美的。正如其他人所指出的，我必须为下拉菜单添加一条规则。用上述 Bootstrap 4 示例的说法：.navbar-expand-custom .navbar-nav .dropdown-menu { position: absolute; }
这正是我所需要的。谢谢！

【解决方案2】：

您必须为此编写一个特定的媒体查询，根据您的问题，在 768px 以下，导航栏将折叠，因此在 768px 以上和 1000px 以下应用它，就像这样：

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

这将隐藏导航栏折叠，直到默认出现引导单元。随着折叠类翻转导航栏内的内部资产折叠将自动隐藏，同样您必须根据需要设置 css。

【讨论】：

目前导航栏在宽度低于 768px 时会折叠。但我希望导航栏在宽度低于 1000 像素时折叠。为此，您不需要在 768 和 1000 之间显示 .collapse 吗？
是的，collapse 类对于移动屏幕很重要，因此如果宽度低于 768 像素，导航栏将为 display:none，因此所需的操作将在 768 和 1000 标记内应用...
这在 Bootstrap 3 上不起作用，因为有另一个规则 navbar-collapse.collapse 具有 display: block !important。禁用它会导致折叠按钮不出现......所以我想这是很多需要重新定义的类，而不仅仅是collapse
是的，在自定义媒体查询中必须重写一堆 Bootstrap 类：bootply.com/120604
哈哈，到底是谁建立了引导程序？没想到我们需要改变那个小细节？

【解决方案3】：

在 bootstrap3 中，将此变量 @grid-float-breakpoint 更改为您需要的变量。默认值为 768px

【讨论】：

你能举个例子吗？
请记住，如果您使用的是 sass 并且您不想替换供应商代码（您不应该），您必须在之前包含包含自定义值的变量的文件引导 sass 文件。原因是 Bootstrap 的所有变量都设置为默认值！值，所以我们需要先导入我们的变量来覆盖这些值。
请添加一个如何执行此操作的示例...我是引导程序新手，并且 grep 在我的项目中显示了此变量的 0 个实例。
@MattClark @grid-float-breakpoint 在编译器上定义：getbootstrap.com/customize - 默认值为@screen-sm-min，但您可以将其更改为1234px。

【解决方案4】：

终于弄清楚了如何通过在http://getbootstrap.com/customize/ 处摆弄“@grid-float-breakpoint”来更改折叠宽度。

转到 bootstrap.css 中的第 2923 行（也是最低版本）并将 @media screen and (min-width: 768px) { 更改为 @media screen and (min-width: 1000px) {

所以代码最终会是：

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

【讨论】：

请注意，如果您使用定制器，您引用的行号会有所不同：getbootstrap.com/customize
刚刚更改了我的responsive.less 中的@grid-float-breakpoint 为我工作！
您应该在另一个 CSS 文件中覆盖它，而不是直接更改引导 css 文件。
第一次访问 :[link]( getbootstrap.com/customize 定位：'更少变量' -> '媒体查询断点' 更改：@ screen-lg 值从 1200px 到 1920px 定位：“网格系统” -> @grid-float-breakpoint 更改：@screen-sm-min 到 @screen-lg 滚动到页面末尾。点击“编译和下载” 提取并使用这些下载的文件。

【解决方案5】：

我刚刚通过使用以下 CSS 代码成功地做到了这一点。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

【讨论】：

当宽度在 768px 到 1000px 之间时，它不会显示折叠菜单按钮。
@craftsman ：对于按钮，使用这个： .navbar-toggle { display: block !important; } .navbar-header { 宽度：100%;高度：60px； }
仍然不显示汉堡菜单内的内容

【解决方案6】：

在 Bootstrap 3 .LESS 源代码中，variables.less 中定义了一个名为 @grid-float-breakpoint 的变量，其中包含以下有用的注释：

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

匹配的@grid-float-breakpoint-max值设置为负1px：

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

解决方案：

所以只需将 @grid-float-breakpoint 的值设置为 1000px，然后将 bootstrap.less 重建为 bootstrap.css：

例如

@grid-float-breakpoint: 1000px;

【讨论】：

如何重建？我试过这个命令行：$ lessc bootstrap.less bootstrap.css 但什么也没发生
@AnthonyRn：我不知道你的项目设置是什么。我只是在我的 VS 2013 项目中更新了 Bootstrap LESS 源代码，并在保存时重建了它。也许你应该问一个新问题？
我的问题通过使用Bootstrap的在线定制工具解决了getbootstrap.com/customize谢谢你的解决方案！
我认为这应该是公认的答案，因为它使用 Bootstraps 自己的方法来定义断点。例如，我能够简单地“重建”引导程序，并通过将此变量设置为我需要的断点来获得所需的结果。
@AnthonyR 要重建，请使用 grunt 命令grunt dist，它将重新生成 dist 目录。您将从 gruntfile.js 所在的目录运行该命令。参考：getbootstrap.com/getting-started/#grunt

【解决方案7】：

更改引导变量的 Sass 方法实际上记录在 bootstrap-sass github 页面上。

在@import bootstrap 之前重新定义变量：

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

【讨论】：

【解决方案8】：

除了@Skely 的回答，要使导航栏中的下拉菜单 工作，还要添加它们的类以被覆盖。最终代码如下：

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

demo code

【讨论】：

【解决方案9】：

导航栏可以利用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 类在其内容折叠在按钮后面时进行更改。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。

对于永不折叠的导航栏，在导航栏上添加 .navbar-expand 类。对于总是折叠的导航栏，不要添加任何 .navbar-expand 类。

例如：

<nav class="navbar navbar-expand-lg"></nav>

手机菜单正在大屏显示。

参考： https://getbootstrap.com/docs/4.0/components/navbar/

【讨论】：

是的，这个完全符合我的需要。当然，如果你需要更具体的断点，那么配置你自己的媒体查询是必要的（因此这个问题的有利答案）

【解决方案10】：

在 bootstrap v4 中，导航可以使用不同的 css 类迟早折叠

例如：

navbar-toggleable-sm
navbar-toggleable-md
navbar-toggleable-lg

使用导航按钮：

隐藏的sm-up
隐藏-md-up
隐藏-lg-up

【讨论】：

在当前的 alpha 版中，我似乎只去navbar-toggleable-sm，xs 使它永远不会切换。可能是我做错了什么。谢谢！
@nerdwaller 看起来你是对的，将 xs 编辑为 sm。

【解决方案11】：

这对我有用 Bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

花了一段时间才弄清楚这两个：

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

【讨论】：

这对我有用。唯一的例外是上述示例中的最小像素宽度应为 1000 像素。

【解决方案12】：

对于 Bootstrap 3.3，这是您唯一需要的代码：

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

【讨论】：

不能完全工作。它显示的菜单项不是垂直的，而是水平的。

【解决方案13】：

您最好的选择是使用您使用的 CSS 处理器的一个端口。

我是 SASS 的忠实粉丝，所以我目前使用 https://github.com/thomas-mcdonald/bootstrap-sass

这里似乎有一个 Stylus 的分支：https://github.com/Acquisio/bootstrap-stylus

否则，在 css 版本中，搜索和替换是你最好的朋友...

【讨论】：

那么对于搜索和替换选项，这是否意味着直接编辑 bootstrap.css 媒体查询？我可以更改仅适用于导航栏的媒体查询吗？有人告诉我编辑源引导文件不是一个好主意，但我不知道为什么，你怎么看？

【解决方案14】：

您好，我认为您可以像这样使用 CSS 您可以更改断点引导菜单

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

【讨论】：

【解决方案15】：

这是我的工作代码。（下拉导航栏链接也有效）

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}

【讨论】：

【解决方案16】：

这就是我的诀窍：

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

【讨论】：

使用您的解决方案和 Veek 的解决方案，我发现在 768 和 1000 之间，边距不正确地扩大了。他们在这些限制之外很好。使用您的解决方案，折叠菜单的图标在折叠后也不会留在右侧，而是压在“品牌”上。
很抱歉，我显然搞砸了。我仍然有在这些限制内出现不适当的宽边距的问题。但是我现在看到官方的online bootstrap 示例本身就表现出相同的边距问题。

【解决方案17】：

在 bootstrap 4 中，如果您想在 navbar-expand-*、展开和折叠以及显示和隐藏汉堡包（navbar-toggler）时覆盖，您必须在 bootstrap.css 中找到该样式/定义，然后重新定义它在您自己的 customstyle.css 中（或者如果您愿意，可以直接在 bootstrap.css 中）。

例如。我希望 navbar-expand-lg 折叠并显示 navbar-toggler 在 950 像素。在 bootstrap.css 我发现：

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

在这之下……

@media (min-width:992px) { 
    ... lots of styling ...
}

我复制了两个 @media 查询并将它们粘贴到我的 style.css 中，然后修改了大小以满足我的需要。我的情况是我希望它在 950 像素处折叠。 @media 查询必须是不同的大小（我猜），所以我将容器最大宽度设置为 949.98px 并将 950px 用于其他 @media 查询，因此以下代码附加到我的 style.css 中。这并不容易从我在 Stackoverflow 和其他地方找到的扭曲解决方案中解开。希望这会有所帮助。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

【讨论】：

【解决方案18】：

这是我在 React with Bootstrap 中使用的工作代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

【讨论】：

【解决方案19】：

Bootstrap 4.4 现在支持它

navbar-expand-sm

【讨论】：

是的，正确，但您需要 navbar-expand-lg 来折叠大屏幕上的导航