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

当前，当浏览器宽度下降到768px以下时，导航栏会变为折叠模式。我想把这个宽度改为1000px，这样当浏览器低于1000px时，导航栏就会变成折叠模式。我想这样做没有使用较少，我使用触控笔不是较少。

我的问题和这个问题一样:引导3导航栏崩溃

但所有这些问题的答案都解释了如何通过改变LESS变量来实现。我没有处理较少，我使用手写笔，所以我想知道如何使用手写笔或其他方法。

谢谢!

当前回答

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

2015-03-05 02:21:09

其他回答

这就是我成功的秘诀:

@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-03 07:25:09

我刚刚通过使用下面的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-18 21:06:11

Sass改变引导变量的方法实际上在bootstrap- Sass github页面上有文档。

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

2016-07-05 06:51:27

现在Bootstrap 4.4支持它

navbar-expand-sm

2020-01-11 01:57:20

这对我很有效

@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-15 00:51:35

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

推荐文章

最新文章

标签