2016-05-18 151 views
1

同一導航欄我有一個標誌,下載應用程序按鈕導航欄,菜單滑動(如u可以像看) enter image description here沒有崩潰

但是,當寬度小於768個像素,我想導航欄出現同樣喜歡更寬的屏幕view.But它出現這樣 enter image description here

導航欄滑動菜單:

enter image description here

我用很多方式嘗試過,但無法得到它。 我的代碼http://jsbin.com/neyenanevu/edit?html,css,js,output

+0

我們看不到代碼。 – Abbr

+0

感謝您的回覆!我已經給出了代碼 –

回答

1

UPD。您可以找到bootstrap.css的所有片段,其中同時提及navbar@media (min-width: 768px)

嘗試使用:

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

http://jsbin.com/nenuquq/edit?html,css,js,output


您可以設置在其導航欄變成倒塌斷點:

  1. 在設置字段@grid-float-breakpointGrid system價值,因爲你需要。例如,零。

  2. 單擊頁面底部的Compile and Download按鈕。

  3. 從結果存檔中提取文件bootstrap.cssbootstrap.min.css。使用它們代替標準文件bootstrap.cssbootstrap.min.css在您的網站上。

  4. 根據需要調整導航欄。在任何屏幕寬度上都是一樣的。

+0

的其他鏈接感謝您的回覆。它的工作原理,但我不想使用自定義引導我有相同的引導鏈接到所有文件。所以,如果我現在改變,一切都會搞砸了! –

+0

@SriharshaNutalapati哦,我明白了。嘗試使用:'.navbar-left {float}:left!important; } .navbar-right {float}:right!important; }'。我已經更新了我的答案。 –

+0

@SriharshaNutalapati你可以在同一時間找到'bootstrap.css'的所有片段,它提及'navbar'和'@media(min-width:768px)'。 –