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

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

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

谢谢!


当前回答

这就是我成功的秘诀:

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

其他回答

这就是我成功的秘诀:

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

我刚刚通过使用下面的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;
    }

}

嗨,我认为你可以这样做使用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;
    }
}

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

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

eg:

导航栏-切换-SM 导航栏-切换-MD 导航栏-切换-LG

导航按钮:

hidden-sm-up hidden-md-up hidden-lg-up