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

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

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

谢谢!


当前回答

除了@Skely answer,要使导航栏内的下拉菜单工作,也添加他们的类被覆盖。最终代码如下:

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

演示代码

其他回答

在Bootstrap 3 . less源代码中,变量中定义了一个变量。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。较少进入bootstrap.css:

e.g.

@grid-float-breakpoint: 1000px;

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

最后通过在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;
  }
}

2018年更新

引导4

在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个导航栏状态的演示

您还可以通过添加一些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;
    }
}

引导4自定义导航栏断点 引导4导航栏断点示例


**Bootstrap 3**

用于引导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的示例如下。


这就是我成功的秘诀:

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