html - 居中导航栏内容并在 Bootstrap 中仍然保持响应能力？

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;
   }
}