在不使用LESS的情况下更改引导导航栏崩溃断点

205

当前，当浏览器宽度降至768px以下时，导航栏将变为折叠模式。我想将此宽度更改为1000px，所以当浏览器低于1000px时，导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作，而是在使用手写笔而不是LESS。

我的问题与此问题相同：Bootstrap 3 Navbar折叠

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

谢谢！

css  twitter-bootstrap  responsive-design  navbar  collapse 
— 近点
source

Answers:

50

您必须为此编写一个特定的媒体查询，从您的问题开始，在768px以下，导航栏将折叠，因此将其应用于768px以上和1000px以下，如下所示：

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

这将隐藏导航栏折叠，直到默认出现引导单元。当折叠类翻转时，导航栏内部的内部资产折叠将被自动隐藏，就像明智的选择一样，必须根据需要设置css。

— 索拉卜
source
当前，当宽度小于768px时，导航栏会折叠。但我希望导航栏在宽度小于1000px时折叠。为此，您不需要显示768至1000之间的.collapse吗？
— 2013年
是的，collapse该类对于移动屏幕非常重要，因此，如果宽度小于768px，则导航栏将为display:none，因此所需的操作将应用于768和1000标记之内...
— SaurabhLP
64
因为有另一条规则，这并不在引导3个工作navbar-collapse.collapse具有display: block !important。禁用它会导致折叠按钮不显示...所以我想很多类需要重新定义，而不仅仅是collapse
— Daniele Ricci 2014年
42
是的，必须在自定义媒体查询中覆盖一堆Bootstrap类：bootply.com/120604
— Zim
1
哈哈，谁在地上建立了引导程序？没想到我们不需要更改这些小细节吗？
— MH
400

2018更新

引导程序4

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

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

  • navbar-expand-sm = xs屏幕上的移动菜单<576px
  • navbar-expand-md =小于768像素的sm屏幕上的移动菜单
  • navbar-expand-lg = md屏幕上的移动菜单<992px
  • navbar-expand-xl =小于1200像素的lg屏幕上的移动菜单
  • navbar-expand =从不使用移动菜单
  • (no expand class) =始终使用移动菜单

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

您还可以通过添加一些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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 自定义 Navbar断点
Bootstrap 4 Navbar断点示例

引导程序3

对于Bootstrap 3.3.x，这是覆盖CSS断点的工作 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（带有搜索表单）

注意：以上适用于768px以上的像素。如果您需要将其更改为小于768px的小于768px例子是在这里。

— 齐姆
source
尝试此首次访问：[link]（getbootstrap.com/customize 定位：“较少变量” –>“媒体查询断点”更改：@ screen-lg值从1200px变为1920px定位：“网格系统” –> @ grid-float -breakpoint更改：@屏幕-SM-分钟@屏幕LG滚动至尾页，点击“编译并下载”提取和使用这些下载的文件
— rpalzona
6
当我将值设置为高于768px时，以上代码可以工作，但是我需要实现相反的效果……我只希望将其折叠为例如400px，但是当我设置此值时，引导程序似乎正在拾取原始的768。 - 有任何想法吗？谢谢
— 克里斯·理查兹
6
尽管此答案的工作原理很吸引人，但它与下拉菜单混淆了，也许您需要改进答案。
— Abhishek Pandey
2
@AbhishekPandey我发现这个答案很有用（关于下拉菜单的一部分）
— cbuchart
1
谢谢。与旁边带有复选标记的“解决方案”不同，您的代码实际上可以工作。
— Michael S. Miller
46

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

— 丰德
source
17
你能举个例子吗？
— e.thompsy 2015年
2
请记住，如果您使用的是sass，并且不想替换供应商代码（不应这样做），则必须在引导sass文件之前包含包含具有自定义值的变量的文件。原因是所有Bootstrap的变量都设置为默认值！值，因此我们需要通过首先导入变量来覆盖这些值。
— Makis K.
请添加如何执行此操作的示例...我是Bootstrap的新手，并且grep在我的项目中显示了该变量的0个实例。
— 马特·克拉克
1
@MattClark @grid-float-breakpoint在编译器上定义：getbootstrap.com/customize-默认值为，@screen-sm-min但您可以将其更改为1234px。
— rybo111 '16
24

最后，通过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;
  }
}
— 史提芬
source
请注意，如果您使用的是Customizer，则引用的行号将有所不同：getbootstrap.com/customize
— henrywright 2014年
1
只是改变了@grid-float-breakpoint我responsive.less对我的作品！
— cvng 2014年
6
您应该在另一个CSS文件中覆盖它，而不是直接更改bootstrap css文件。
— 伊万卡·托多罗娃
1
首次访问：[link]（getbootstrap.com/customize 定位：“较少变量” –>“媒体查询断点”更改：@ screen-lg值从1200px变为1920px定位：“网格系统” –> @ grid-float-breakpoint更改：@ screen-sm-min到@ screen-lg滚动到页面结尾，单击“编译并下载”，提取并使用这些下载的文件
— 。– rpalzona
13

我只是通过使用以下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;
    }

}
— ruperto17
source
2
当宽度介于768px至1000px之间时，它不会显示折叠的菜单按钮。
— 工匠
4
@craftsman：对于按钮，请使用：.navbar-toggle {display：block！important; } .navbar-header {width：100％; 高度：60px；}
— Aniket Suryavanshi15年
3
仍然不显示汉堡菜单内的内容
— Behzad
13

在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;
— 去编码
source
如何重建？我尝试了此命令行：$ lessc bootstrap.less bootstrap.css但什么都没发生
— AnthonyR
@AnthonyRn：我不知道您的项目设置是什么。我只是在VS 2013项目中更新了Bootstrap LESS源，并在保存时对其进行了重建。也许您应该问一个新问题？
— Gone Coding
使用Bootstrap的在线定制工具解决了我的问题，在这里getbootstrap.com/customize 谢谢您的解决方案！
— AnthonyR
1
我认为这应该是公认的答案，因为它使用Bootstraps自己的方法定义断点。作为示例，我能够简化“重建”引导程序，并将此变量设置为所需的断点，即可获得所需的结果。
— Serge Melis
@AnthonyR要重建，请使用grunt命令grunt dist，该命令将重新生成dist目录。您将从拥有gruntfile.js的目录中运行该命令。参考：getbootstrap.com/getting-started/#grunt
— Radmation
11

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

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
— 热带鱼
source
7

除了@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;
        }
    }

演示代码

— 贾瓦勒
source
4

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

例如：

  • 导航栏可切换短信
  • 导航栏可切换md
  • navbar-toggleable-lg

使用导航按钮：

  • 隐藏的短信
  • 隐藏的md-up
  • 隐藏lg
— 埃迪·贾德（Eddie Jaoude）
source
在当前的Alpha中，似乎只navbar-toggleable-sm对我有用，xs因此它永远不会切换。可能是我做错了什么。谢谢！
— nerdwaller
@nerdwaller看起来您是对的，将xs修改为sm。
— whitneyland '17
3

对于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;
   }
}
— 威客
source
不能完全正常工作。它显示的菜单项不是垂直的，而是水平的。
— Volomike，
3

这对我有用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;
}
— 哈立德
source
这对我有用。唯一的例外是上述示例中的最小像素宽度应为1000px。
— Sascha
2

最好的选择是使用所用CSS处理器的端口。

我是SASS的忠实拥护者，因此目前使用https://github.com/thomas-mcdonald/bootstrap-sass

看起来这里有一个手写笔叉：https : //github.com/Acquisio/bootstrap-stylus

否则，在CSS版本中，“搜索​​与替换”是您最好的朋友...

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

嗨，我认为您可以使用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;
    }
}
— Yasssine ELALAOUI
source
1

导航栏可以利用.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/

— 昂山明特
source
是的，这个完全适合我的需求。当然，如果您需要更具体的断点，则必须配置自己的媒体查询（因此，对这个问题的最佳回答）
— Coderhi
0

这就是我的诀窍：

@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;
}
— 让维斯特
source
使用您的解决方案和Veek的解决方案，我发现在768至1000之间，边距会不适当地扩展。在这些限制之外，它们很好。对于您的解决方案，折叠菜单的图标在折叠后也不位于右侧，而是向上按“品牌”。
— Mike O'Connor
很抱歉，我显然很无聊。我仍然有一个问题，即在这些限制之内出现了不适当的边距。但是，我现在看到一个官方的在线引导程序示例本身也存在相同的利润问题。
— Mike O'Connor
0

在bootstrap 4中，如果要在navbar-expand- *时进行覆盖，展开和折叠并显示和隐藏汉堡包（navbar-toggler），则必须在bootstrap.css中找到该样式/定义，然后在您的样式中重新定义它拥有customstyle.css（如果愿意，也可以直接在bootstrap.css中）。

例如。我想让navbar-expand-lg折叠起来，并显示950px的navbar-toggler。在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中，然后修改了大小以适合我的需求。我的情况下，我希望它以950px的分辨率崩溃。@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%;
    }
}
— 杰克·梅森
source
0

这是我在React与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>
— webmastx
source
0

现在在Bootstrap 4.4上受支持

navbar-expand-sm
— 里克
source
是的，是的，但是您需要navbar-expand-lg才能在大屏幕上折叠导航
— Coderhi，
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.