Question

我正在使用Twitter Bootstrap。我确实创建了一个导航栏，当谷歌浏览器窗口缩小时，它确实崩溃了。但是当我添加一些css来使导航栏中的内容居中时，当窗口缩小时它不再“崩溃”，并且导航栏<li>完全消失。这是为什么？这是我的导航栏代码：

<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文件中时，它会在导航栏的“折叠”停止时显示。如何缩小导航栏内容并在缩小Google Chrome窗口时仍保持导航栏的“折叠”状态？

Answer 1

你可以这样做:(正如@Christina所建议的那样）

Bootply - DEMO

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

中心导航栏内容并仍然保持Bootstrap的响应能力？

1 个答案: