目前，当浏览器宽度低于768px时，导航栏会变为折叠模式。我想将此宽度更改为1000px，以便在浏览器低于1000px时，导航栏变为折叠模式。我想在不使用LESS的情况下完成这个操作，我正在使用stylus而不是LESS。
我的问题与此问题相同：Bootstrap 3 Navbar Collapse
但是，该问题中的所有答案都是通过更改LESS变量来解决的。我没有使用LESS，我正在使用stylus，因此我想知道如何使用stylus或其他方法来完成此操作。
谢谢！
18个回答
482
Bootstrap 5（2023年更新）
如{{link1:文档中所述}，
对于从不折叠的导航栏，请在导航栏上添加
.navbar-expand类。 对于始终折叠的导航栏，请不要添加任何.navbar-expand类。
Bootstrap 4（更新于2018年）
在Bootstrap 4中，使用navbar-expand-*类更容易更改导航栏断点：
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm= 在xs屏幕上<576px时使用移动菜单navbar-expand-md= 在sm屏幕上<768px时使用移动菜单navbar-expand-lg= 在md屏幕上<992px时使用移动菜单navbar-expand-xl= 在lg屏幕上<1200px时使用移动菜单navbar-expand= 永远不使用移动菜单(无扩展类)= 始终使用移动菜单
如果您排除navbar-expand-*，则移动菜单将在所有宽度上使用。这是所有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 自定义 导航栏断点
Bootstrap 4 导航栏断点示例
Bootstrap 3
对于Bootstrap 3.3.x，这里是用于覆盖导航栏断点的有效 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;
}
}
991像素的工作示例：https://codeply.com/p/GxWMLj14VJ
1200像素的工作示例：https://codeply.com/go/VsYaOLzfb4（带搜索表单）
注意：以上适用于768像素以上的任何尺寸。如果您需要将其更改为小于768像素，请参考此处小于768像素的示例。
- Zim
8
57
你需要为此编写一个特定的媒体查询，根据你的问题，在768像素以下，导航栏将折叠，因此请在768像素以上和1000像素以下应用它，就像这样：
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
这将隐藏导航栏折叠，直到使用 Bootstrap 单位的默认发生。由于折叠类翻转了导航栏折叠内部的资产，因此将自动隐藏，同样，您必须按您所需的设计设置CSS。
- SaurabhLP
6
当前，当屏幕宽度小于768像素时，导航栏会折叠。但我想让导航栏在宽度小于1000像素时折叠。为此，难道不需要在768到1000之间显示".collapse"吗？ - Nearpoint
是的，
collapse类对于移动屏幕非常重要，因此如果宽度低于768px，则导航栏将为display:none，因此所需的操作将在768和1000之间应用... - SaurabhLP66这在Bootstrap 3上不起作用，因为还有另一个规则
navbar-collapse.collapse，它具有display: block !important。禁用它将导致折叠按钮不出现...所以我想这需要重新定义许多类，而不仅仅是collapse。 - Daniele Ricci44是的，在自定义媒体查询中必须覆盖一堆Bootstrap类：http://bootply.com/120604 - Carol Skelly
3哈哈，到底是谁建立了Bootstrap？没想到我们需要更改那个小细节吗？ - M H
Zim，在你的代码中，你忘记了这个，以避免当有太多列表项时出现溢出：.navbar-collapse.in { overflow-y: auto !important; } - LauraEld
46
在 Bootstrap3 中，将变量 @grid-float-breakpoint 更改为所需的值。默认值为 768px。
- fengd
4
17能否请您举一个例子？ - e.thompsy
2请注意，如果您正在使用sass，并且不想替换供应商代码（您不应该这样做），则必须在引入bootstrap sass文件之前包含包含自定义值的变量文件。原因是Bootstrap的所有变量都设置为默认值！因此，我们需要通过首先导入我们的变量来覆盖这些值。 - Makis K.
请提供一个如何实现这个功能的示例... 我是Bootstrap的新手，使用grep在我的项目中找不到任何此变量的实例。 - Matt Clark
1@MattClark
@grid-float-breakpoint 在编译器中定义：http://getbootstrap.com/customize - 默认值为 @screen-sm-min，但您可以将其更改为 1234px。 - rybo11125
最终成功地通过调整“@grid-float-breakpoint”在http://getbootstrap.com/customize/上更改折叠宽度。
转到 bootstrap.css（也适用于min版本）中的第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;
}
}
- Stephen
4
请注意，如果您使用了自定义工具，则引用的行号将不同：http://getbootstrap.com/customize/ - henrywright
1刚刚在我的
responsive.less文件中修改了@grid-float-breakpoint，对我起作用了！ - cvng6你应该在另一个CSS文件中覆盖它，而不是直接修改Bootstrap CSS文件。 - Ivanka Todorova
1首次访问：链接找到：“Less variables” –> “Media queries breakpoints”更改：@screen-lg的值从1200px更改为1920px找到：“Grid system” –> @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
3
2当宽度在768像素到1000像素之间时，它不会显示折叠菜单按钮。 - craftsman
4@craftsman：对于按钮，请使用以下代码：
.navbar-toggle {
display: block !important;
}
.navbar-header {
width: 100%;
height: 60px;
} - Aniket Suryavanshi
4仍然没有显示汉堡菜单内部的内容。 - 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值设置为该值减去1像素：
//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
解决方案：
将@grid-float-breakpoint的值设置为1000像素，然后重新构建bootstrap.less成bootstrap.css：
例如：
@grid-float-breakpoint: 1000px;
- Gone Coding
5
如何重新构建？
我尝试了这个命令行：
$ lessc bootstrap.less bootstrap.css，但是没有任何反应。 - AnthonyR@AnthonyRn：我不知道你的项目设置是什么。我只是在我的VS 2013项目中更新了Bootstrap LESS源代码，然后它会在保存时重新构建。也许你应该提一个新问题？ - iCollect.it Ltd
我的问题通过使用Bootstrap的在线定制工具解决了，链接在这里http://getbootstrap.com/customize感谢您提供的解决方案！ - AnthonyR
1我认为这应该是被接受的答案，因为它使用了Bootstrap自己的方法来定义断点。例如，我能够简单地“重建”Bootstrap，并通过将此变量设置为我需要的断点来获得所需的结果。 - Serge Melis
@AnthonyR 要重新构建，您可以使用grunt命令
grunt dist，它将重新生成dist目录。您需要在包含gruntfile.js的目录中运行该命令。参考：http://getbootstrap.com/getting-started/#grunt - Radmation11
在bootstrap-sass的GitHub页面上有关于更改Bootstrap变量的Sass方法的详细说明。
只需在@import bootstrap之前重新定义这些变量即可：
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
- tropicalfish
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;
}
}
- jeanadam
4
这对我有用 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;
}
- Khaled
1
这对我有用。唯一的例外是在您上面的示例中，最小像素宽度应为1000px。 - Sascha
4
在Bootstrap v4中，导航可以使用不同的CSS类来更早或更晚地折叠。
例如：
- navbar-toggleable-sm - navbar-toggleable-md - navbar-toggleable-lg
通过以下按钮进行导航：
- hidden-sm-up - hidden-md-up - hidden-lg-up
例如：
- navbar-toggleable-sm - navbar-toggleable-md - navbar-toggleable-lg
通过以下按钮进行导航：
- hidden-sm-up - hidden-md-up - hidden-lg-up
- Eddie Jaoude
2
在当前的 alpha 版本中，对我来说似乎只能到
navbar-toggleable-sm，xs 使它永远不会切换。可能是我做错了什么。谢谢！ - nerdwaller@nerdwaller 看起来你是对的，已将 xs 编辑为 sm。 - whitneyland
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
.navbar-expand-custom .navbar-nav .dropdown-menu { position: absolute; }- BBQ Singular