Bootstrap:如何更早地折叠导航栏

时间:2014-01-12 16:06:50

标签: css twitter-bootstrap navbar collapse

我希望以早于768px的分辨率折叠我的导航栏,例如992px,我该怎么做?谢谢! (我知道我可以在引导页面上自定义它,但我不想用新的bootstrap.css文件重新启动我的项目)

7 个答案:

答案 0 :(得分:87)

如果你不想通过使用Less / Sass来操纵Bootstrap(也许是因为你想通过CDN加载它),这就是我的诀窍:

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

演示:https://jsfiddle.net/0pmy8usr/

将其添加到单独的CSS文件中,并在bootstrap.css

之后包含它

Bootstrap 4的更新:

@media(max-width:900px) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;} 
  .navbar-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}

演示:https://jsfiddle.net/mkvhbgnp/3/

答案 1 :(得分:10)

variables.less中,更改

@grid-float-breakpoint:   @screen-sm-min

@grid-float-breakpoint: @screen-md-min;  

答案 2 :(得分:7)

如果您需要以早于768px的分辨率折叠导航栏,那么您需要使用@media min-widthmax-width,而您无需启动新项目新的 .css 文件(示例:custom.css )并将其插入主bootstrap.css 下以覆盖其值。并在其中编写此代码:

<强> CODE:

@media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

另外,您可以查看此帖子:change bootstrap navbar collapse

我希望这会给你解决方案。

答案 3 :(得分:4)

您还可以覆盖缩小差距的引导类。 Bellow是使用下拉菜单覆盖基本导航栏的工作代码。并非所有类都被覆盖,因此根据您使用的内容,您可能需要覆盖其他类。

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

click here for the live demo code

答案 4 :(得分:2)

解决方案实际上非常简单。使用带有<nav>标签的.navbar-expand-lg或.navbar-expand-xl类。

示例:-

<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>

谢谢大家。

答案 5 :(得分:0)

我建议您将引导程序代替CDN引入您的项目中,而只是寻找如下所示的媒体查询:

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; //...etc.

并将其更改为:

@media (min-width: 900px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; // ...etc.

或者,如果您使用的是CDN,请为该特定媒体查询创建替代。

答案 6 :(得分:0)

如果您希望菜单可以从中型设备折叠

您可以直接通过

toggleable =“ md”

否则,您可以通过设置sccs /更少的bootstrap来采用其他可折叠的方法。