twitter-bootstrap - Bootstrap 导航栏宽度与容器相同

Question

我正在使用 Bootstrap 3 。我不能让导航栏与容器具有相同的宽度。如果它适用于大屏幕但不适用于其他屏幕尺寸。我如何制作固定大小的导航栏，它将改变与容器宽度相同的不同屏幕。

<div class="row"><!--Start row-->
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav><!--End Navbar-->
</div>

Answer 1

我对此的解决方法是简单地输入 container <nav class="...">中的类(class)这会将您的中殿栏限制为container指定的宽度。属性。

代码如下:

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
         <div class="container-fluid">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav>

对于<nav>来说这也不是必需的。被包裹在 <div class="row"> 中我希望这就是您正在寻找的内容。