中心导航栏内容仍然保持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？

回答

相关问题