twitter-bootstrap twitter bootstrap 中导航栏中的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13798634/
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
container inside a navbar in twitter bootstrap
提问by Jayesh
I have a following navbar code using twitter bootstrap
我有以下使用 twitter bootstrap 的导航栏代码
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
and the output is
When I remove "width: auto" from ".navbar .container{width:auto}" in bootstap.css the output becomes
and is the output I am expecting.
并且输出是
当我从 bootstap.css 中的“.navbar .container{width:auto}”中删除“width: auto”时，输出变成
并且是我期望的输出。
https://github.com/twitter/bootstrap/issues/2093shows "width: auto" as an intended feature.What am I doing wrong here?
https://github.com/twitter/bootstrap/issues/2093显示“宽度：自动”作为预期功能。我在这里做错了什么？
回答by Justin King
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
This should do it
这应该做
回答by Swadesh Behera
I found another solution to the above issue.
我找到了上述问题的另一种解决方案。
Add navbar-fixed-topclass to the main navbardiv.
将navbar-fixed-top类添加到主navbardiv。
And add
并添加
.navbar-fixed-top{
position: relative;
}
to your css rule.
到您的 css 规则。
This restricts the menu from pulling it to the left and worked fine while I was developing a theme for wordpress.
这限制了菜单向左拉，并且在我为 wordpress 开发主题时工作正常。
回答by timbo
If you look at the Bootstrap basic nav bar exampleyou will see that there is a margin on either side of the navbar. This is because for a non-fluid container, your page will occupy a fixed width and the navbar uses that width.
如果您查看Bootstrap 基本导航栏示例，您会看到导航栏的两侧都有一个边距。这是因为对于非流体容器，您的页面将占据固定宽度并且导航栏使用该宽度。
If you want the navbar to extend across the entire page, you need to use a class="container-fluid"but in a fluid layout, the menu items (by default) will flow from the left-hand side of the page.
如果您希望导航栏扩展到整个页面，则需要使用 aclass="container-fluid"但在流体布局中，菜单项（默认情况下）将从页面的左侧流动。
In your code, you are using both containerand container-fluidwhich is incorrect, and as per the Bootstrap documentation, you need to place the nav in a container - not embed a container in your nav tags.
在您的代码中，您同时使用了container和container-fluid，这是不正确的，并且根据 Bootstrap 文档，您需要将导航放在容器中 - 而不是在导航标签中嵌入容器。
回答by Matthew
I solved this by removing the width: autodefinition from .navbar .containerin bootstrap.css.
我通过width: auto从.navbar .containerin 中删除定义解决了这个问题bootstrap.css。
Not an ideal solution (editing bootstrap.cssin general) but it was much simpler than applying all the responsive widths to the selector.
不是一个理想的解决方案（bootstrap.css一般编辑），但它比将所有响应宽度应用到选择器要简单得多。
