2017-07-31 265 views
0

我有一個Bootstrap導航欄,我試圖設置爲整個窗口的漢堡包,除非它伸展到700px左右(當它可以顯示所有nabber下拉菜單而不堆疊時)。這個效果一直持續到400px左右,此時'home'按鈕和'hamburger'似乎向nabber的中間靠攏,並且不會正常下降。我曾嘗試使用左拉和右拉類,但是這會將它們留在原地。我的導航欄是這樣的:Bootstrap導航欄

Nav bar screenshot

Nav bar screenshot

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="index.html">Home</a> 
    </div> 

與下面的CSS:

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

檢查包含父元素上設置的「最大寬度」。 – UncaughtTypeError

回答

0

嘗試刪除導航元素中的容器。請參閱bootstrap examples有一個容器,其中兩個iem更靠近中間...