225

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

我的问题与这个问题相同:Bootstrap 3 Navbar Collapse

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

谢谢!

4

19 回答 19

458

2018 更新

引导程序 4

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

<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= 从不使用移动菜单
  • (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自定义导航栏断点
Bootstrap 4 导航栏断点示例


**引导程序 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;
  }
}

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

注意:以上适用于超过 768px的任何内容。如果您需要将其更改为小于 768px,小于 768px示例在此处


于 2016-03-29T16:06:56.130 回答
57

您必须为此编写一个特定的媒体查询,根据您的问题,低于 768 像素,导航栏将折叠,因此将其应用到 768 像素以上和 1000 像素以下,就像这样:

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

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

于 2013-11-07T05:24:12.803 回答
46

in bootstrap3, change this variable @grid-float-breakpoint to the one you need. The default value is 768px

于 2015-03-05T02:21:09.123 回答
25

终于弄清楚了如何通过在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;
  }
}
于 2014-03-19T06:42:38.383 回答
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;
    }

}
于 2015-03-18T21:06:11.787 回答
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.lessbootstrap.css

例如

@grid-float-breakpoint: 1000px;
于 2015-08-03T13:35:34.693 回答
11

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

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
于 2016-07-05T06:51:27.953 回答
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;
        }
    }

演示代码

于 2016-05-27T05:25:25.457 回答
6

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

于 2020-03-19T03:31:49.147 回答
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;
}
于 2017-11-15T00:51:35.377 回答
4

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

例如:

  • 导航栏-可切换-sm
  • 导航栏-toggleable-md
  • 导航栏-可切换-lg

使用导航按钮:

  • 隐藏的sm-up
  • 隐藏 md-up
  • 隐藏 lg-up
于 2016-05-02T17:11:42.560 回答
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;
   }
}
于 2016-04-08T11:23:34.870 回答
2

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

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

看起来这里有一个 Stylus 的分支:https ://github.com/Acquisio/bootstrap-stylus

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

于 2013-11-07T04:21:21.020 回答
2

嗨,我认为您可以像这样使用 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;
    }
}
于 2018-01-26T11:19:26.937 回答
1

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

@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;
  }
}
于 2020-07-18T17:43:47.470 回答
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 中,然后修改了大小以满足我的需要。我的情况是我希望它在 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%;
    }
}
于 2018-02-21T14:26:25.000 回答
0

Bootstrap 4.4 现在支持它

navbar-expand-sm 
于 2020-01-11T01:57:20.263 回答
0

这是我在 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>
于 2018-03-17T07:10:58.170 回答
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;
}
于 2016-06-03T07:25:09.243 回答