中心導航欄內容仍然保持Responsivness在Bootstrap？

我爲此使用Twitter Bootstrap。我確實創建了一個導航欄，當谷歌瀏覽器窗口縮小時它確實崩潰了，它應該這樣做。但是，當我添加了一些CSS來將內容置於導航欄中時，窗口縮小時不再「摺疊」，導航欄<li>完全消失。這是爲什麼？這裏是我的導航欄代碼：中心導航欄內容仍然保持Responsivness在Bootstrap？

<nav class="navbar navbar-default navbar-static-top" role="navigation" id="bar"> 
      <div class="container-fluid" id="barbar"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#testen"> 
         <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="collapse navbar-collapse" id="testen"> 
        <ul class="nav navbar-nav"> 
         <li><a href="home.html" id="home"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
         <li><a href="book.html" id="bone"><span class="glyphicon glyphicon-plane"></span> Booking</a></li> 
         <li class="active"><a href="about.html" id="hact"><span class="glyphicon glyphicon-info-sign"></span> About</a></li> 
         <li><a href="contact.html" id="bthree"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li> 
        </ul> 
        <button type="button" class="btn btn-info navbar-btn navbar-right" id="logg><a href="logga.html">Sign in</a></button> 
      </div> 

      </div> 
     </nav>

這裏是CSS：

#barbar{ 
width: 960px; 
display: block; 
margin-left: auto; 
margin-right: auto; 
}

當我上面添加CSS文件這個CSS，它再當「崩潰」的導航欄停止。如何縮小導航欄內容的中心位置並在縮小谷歌瀏覽器窗口時仍然保持導航欄的「摺疊」狀態？

來源

2014-10-16 Carlton

將在一個最小寬度在您的菜單崩潰。你會寫一個媒體查詢 – Christina 2014-10-16 22:05:06

試試這個 - http://www.bootply.com/render/pJJEFWCPy和http://www.bootply.com/pJJEFWCPy – Anonymous 2014-10-16 22:08:03

@MaryMelody所以你沒有改變的HTML代碼，只是在CSS？（媒體查詢，如克里斯蒂娜也建議？） – Carlton 2014-10-16 22:11:02

你可以做到這樣的：（由@Christina建議）

Bootply - DEMO

@media (min-width: 768px) { 
    #barbar { 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     max-width: 980px; 
    } 
}

來源

2014-10-16 22:26:21 Anonymous

中心導航欄內容仍然保持Responsivness在Bootstrap？

回答

相關問題