Bootstrap Navbar折疊點<768px

Question

這是Bootstrap 3的舊問題 - >更改導航欄的折疊點，但這里建議的方法：

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

和這里：

Bootstrap 3 Navbar Collapse

不適用於低於768px的折疊，它似乎只能用於擴展折疊點，而不是縮回它。 我有一個特殊的情況，我的導航欄有3個按鈕，所以它不需要這么早崩潰。 我希望它能以420px的速度崩潰。

有沒有CSS解決方案？ 如果沒有，有人可以指向我需要更改和下載的引導程序自定義頁面中的正確屬性嗎？ 這可能是通用斷點嗎？ 因為沒有什么我能看到的Navbar斷點：

http://getbootstrap.com/customize/

根據要求，導航欄的HTML只是：

<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添加垂直分區：

/*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;
}

Answer 1

是的，將斷點更改為小於768px的任何值與將斷點更改為 768px不同。 您需要覆蓋通常使其崩潰的所有Bootstrap默認值。

@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

Answer 2

以下代碼段基於原始答案，但在導航欄中有下拉菜單時也可以使用。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> @media only screen and (min-width: 560px) { .collapse { display: block; } .navbar-header { float: left; } .navbar-toggle { display: none; } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: -15px; } .container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse { margin-right: 0; margin-left: 0; } .navbar-nav { 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; } .navbar-nav .open .dropdown-menu { position: absolute; float: left; width: auto; margin-top: 2px; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #e5e5e5; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #333; } .navbar-nav .open .dropdown-menu>li>a { line-height: 1.42857143; } .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 3px 20px; } .navbar-right .dropdown-menu { right: 0; left: auto; } } @media only screen and (max-width: 559px) { .collapse { display: none; } .navbar-header { display: block; } } </style> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>