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

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

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

谢谢!


当前回答

最后通过在http://getbootstrap.com/customize/上摆弄“@grid-float-breakpoint”来解决如何改变折叠宽度的问题。

转到bootstrap.css(也是最小版本)的2923行,将@media screen和(min-width: 768px){改为@media screen和(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;
  }
}

其他回答

最好的办法是使用您所使用的CSS处理器的一个端口。

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

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

否则,搜索和替换是你最好的朋友在css版本…

最后通过在http://getbootstrap.com/customize/上摆弄“@grid-float-breakpoint”来解决如何改变折叠宽度的问题。

转到bootstrap.css(也是最小版本)的2923行,将@media screen和(min-width: 768px){改为@media screen和(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;
  }
}

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

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

这对我很有效

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

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