twitter-bootstrap Bootstrap 导航栏宽度与容器相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21559710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar width same as container
提问by Nazmul
I am using Bootstrap 3 . i can't give the navbar same width with the container. if it works in large screen but don't work in other screen size. How can i make a fixed size of my navbar which will change different screen with the same width as container has.
我正在使用 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>
回答by theRyanMark
The fix I would make to this is to simply put the containerclass in the <nav class="...">this will constrain your nave bar to be the width specified by the containerattribute.
我要对此进行的修复是简单地将container类放在<nav class="...">this中，这会将您的中殿栏限制为container属性指定的宽度。
Code below:
代码如下：
<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>
Also it is not nessicary for the <nav>to be wrapped in a <div class="row">I hope this is what you were looking for.
此外<nav>，将 包裹在 a 中也不是必需的，<div class="row">我希望这是您正在寻找的。
回答by Morty
Just turn the class container-fluid to container, and you're done. Worked for me...
只需将类容器流体转换为容器，就完成了。对我来说有效...
回答by Larsons
you forgot a row class (line 2)
你忘记了一个行类（第 2 行）
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
<div class="row">
<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="#">title</a>
</li>
<li><a href="#">title</a>
</li>
<li><a href="#">title</a>
</li>
<li><a href="#">title</a>
</li>
</ul>
</div>
</div>
</div>
</nav>