Bootstrap Navbar崩溃点< 768像素 [英] Bootstrap Navbar collapse point < 768px

问题描述

这是Bootstrap 3的老问题->更改导航栏的折叠点，但此处建议的方法是：

This is an OLD question for Bootstrap 3 -> changing the collapse point for the navbar, but the methodologies suggested here:

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

和此处：

引导程序3 Navbar崩溃

不适用于在 768px 以下崩溃的情况似乎可以扩展塌陷点，而不是缩回它。在我遇到的特殊情况下，导航栏上有3个按钮，因此不需要那么早就合拢。我希望它以420px折叠。

do not work for collapsing below 768px, it only seems to work for extending the collapse point, not retracting it. I have a particular situation where my navbar has 3 buttons, so it doesn't need to collapse so early. I would like it to collapse at 420px instead.

是否有CSS解决方案？如果不是，是否有人可以将我指向引导程序自定义页面中需要更改和下载的正确属性？也许是通用断点？因为看不到导航栏断点：

Is there a CSS solution to this? If not, can somebody point me towards the correct attribute in the bootstrap customisation page which I need to change and download? Is it the generic breakpoints perhaps? Because there is nothing I can see which says Navbar breakpoints:

http://getbootstrap.com/customize/

根据要求，我的导航栏HTML很简单：

As requested, my HTML for the navbar is simply:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="navbar-collapse collapse" id = "navbar">
            <ul class="nav navbar-nav navbar-left">
                <li class = "navbar_buttons"><a id = "new_route_button"><strong>New Route</strong></a></li>
                <li class="divider-vertical"></li>
                <li class = "navbar_buttons"><a id = "clear_route_button">Clear Route</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">    <!--Right justified navbar list-->
                <li class = "navbar_buttons"><a id = "about_button">About</a></li>
            </ul>
        </div>

    </div>  <!-- Container -->

</nav>  <!-- End of Navbar Container -->

然后我有一些CSS来添加垂直分隔：

Then I have some CSS to add a vertical division:

/*Preventing vertical dividers from appearing collapsed*/
@media (max-width: 420px) {
.navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}

/*Defining the vertical dividers*/
.navbar .divider-vertical {
  height: 50px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #DADADA;
}

.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

推荐答案

是的，将断点更改为小于768px 的任何内容都不同于将断点更改为768px 。您需要覆盖通常会使其折叠的所有Bootstrap默认设置。

Yes, changing the breakpoint to anything less than 768px is different than changing the breakpoint over 768px. You need to override all of the Bootstrap defaults that normally make it collapse.

@media only screen and (min-width: 420px) {
    .collapse {
        display: block;
    }

    .navbar-header {
        float: left;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav.navbar-left {
       float: left;
       margin: 0;
    }

    .navbar-nav.navbar-right {
       float: right;
       margin: 0;
    }
    .navbar-nav>li {
        float: left;
    }
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 420px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}

http://www.bootply.com/wpUuFIZqJ2

这篇关于Bootstrap Navbar崩溃点< 768像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！