Bootstrap 3 Navbar Collapse

Question

有没有办法增加bootstrap 3导航栏崩溃的点(即,它会折叠成纵向平板电脑上的下拉列表)？

这两个适用于bootstrap 2但现在不适用!

如何使用Twitter bootstrap-responsive来更改导航栏崩溃阈值？

更改默认的响应式导航栏断点

Answer 1

我今天遇到了同样的问题.

Bootstrap 4

它是一个原生功能:https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

你必须使用.navbar-expand{-sm|-md|-lg|-xl}类:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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;
    }
    .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;
    }
}

只要改变991px通过1199px的md尺寸.

演示

Answer 2

Bootstrap 2和Bootstrap 3之间的最大区别在于Bootstrap 3是"移动优先".

这意味着默认样式是为移动设备而设计的,对于Navbars,这意味着它默认为"折叠",当达到某个最小尺寸时"展开".

Bootstrap 3的网站实际上有一个"提示":http: //getbootstrap.com/components/#navbar

自定义折叠点

根据导航栏中的内容,您可能需要更改导航栏在折叠模式和水平模式之间切换的点.自定义@ grid-float-breakpoint变量或添加您自己的媒体查询.

如果你要重新编译你的LESS,你会在variables.less文件中找到所提到的LESS变量.它目前@media (min-width: 768px)被Bootstrap 3术语设置为"扩展" ,这是一个"小屏幕"(即平板电脑).

@grid-float-breakpoint: @screen-tablet;

如果你想让折叠时间再长一点,你可以调整它:

@grid-float-breakpoint: @screen-desktop; (992px断点)

或者尽早扩大

@grid-float-breakpoint: @screen-phone (480px断点)

如果您希望稍后扩展它,而不是处理重新编译LESS,则必须覆盖在768px媒体查询中应用的样式并让它们返回到先前的值.然后在适当的时候重新添加它们.

我不确定是否有更好的方法来做到这一点.根据您的需要重新编译Bootstrap LESS是最好的(最简单的)方式.否则,您必须找到影响Navbar的所有CSS媒体查询,将它们覆盖为默认样式@ 768px宽度,然后以更高的最小宽度将其还原.

通过更改变量,重新编译LESS将为您完成所有神奇的工作.这是LESS/SASS预编译器的重点.=)

(注意,我确实看了他们一切,这是大约100行代码,这对我来说已经足够烦恼了,只是为了给定项目重新编译Bootstrap并避免意外搞乱一些事情)

我希望有所帮助!

干杯!

Answer 3

最简单的方法是自定义引导程序

找到变量:

 @grid-float-breakpoint

设置为@ screen-sm,您可以根据需要进行更改.希望能帮助到你!

Answer 4

这些都是在变量中控制的,不需要在源代码中捣乱.使用bootstrap,首先尝试变量,然后覆盖.然后回去再次尝试变量;)

我使用带有rails的bootstrap-sass,但它与默认的LESS相同.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

而已!这个变量参考页面非常方便:https://github.com/twbs/bootstrap/blob/master/less/variables.less

Answer 5

感谢Seb33300,我得到了这个工作.然而,似乎缺少一个重要的部分.至少在Bootstrap 3.1.1版中.

我的问题是导航栏以正确的宽度相应地折叠,但是菜单按钮不起作用.我无法展开和折叠菜单.

这是因为collapse.in类被.navbar-collapse.collapse中的!important所覆盖,并且可以通过添加"collapse.in"来解决.Seb33300的例子在下面完成:

@media (max-width: 991px) {
    .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;
    }
}

Answer 6

我想对jmbertucci的回答进行投票和评论,但我还没有被控制信任.我有同样的问题并按照他的说法解决了.如果您使用的是Bootstrap 3.0,请在variables.less中编辑LESS变量.响应断点设置在第200行附近:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

然后在约232行使用@ grid-float-breakpoint变量设置导航栏的折叠值.默认情况下,它设置为 @ screen-tablet.如果你想要你可以使用像素值,但我更喜欢使用LESS变量.

Answer 7

如果您遇到的问题是菜单分为多行,您可以尝试以下方法之一:

1)尽量减少菜单项的数量或长度,例如删除菜单项或缩短单词.

2)减少菜单项之间的填充,如下所示:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

默认填充为两侧(左侧和右侧)15px.

如果您希望更改每个单独的用户:

padding-left: 7px; 
padding-right: 8px;

此设置也会影响下拉列表.

这不能回答这个问题,但它可以帮助那些不想搞乱CSS或使用LESS变量的人.解决这个问题的两种常用方法.