twitter-bootstrap Bootstrap 导航栏没有填满整个宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33170205/
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 doesn't fill the whole width
提问by MichiZH
I am a bootstrap newbie and I have built a HTML site using R and Shiny, which again uses Bootstrap. If you open the page on a wide screen, the page uses the whole width, however the navbar seems limited to like maybe 1000px width. After this width it gets a line break and all further items are showed in line 2. I however want to use the whole width possible until it starts a new row. Of course if the navbar has too many items even for the wide screens it should start a second row, but not if there is some screenspace left.
我是 Bootstrap 新手，我使用 R 和 Shiny 构建了一个 HTML 站点，该站点再次使用 Bootstrap。如果您在宽屏幕上打开页面，页面会使用整个宽度，但导航栏似乎仅限于 1000 像素宽度。在此宽度之后，它会换行，所有其他项目都显示在第 2 行中。但是，我想尽可能使用整个宽度，直到它开始新的一行。当然，如果导航栏即使对于宽屏幕也有太多项目，它应该从第二行开始，但如果还有一些屏幕空间，则不会。
This hasn't helped so far:
到目前为止，这没有帮助：
.navbar .navbar-collapse {
white-space: nowrap;
width:100%;
}
Setting a fixed pixel width (what I don't want, I did it just for tests) didn't center the navbar anymore but extened it to the further right.
设置固定像素宽度（我不想要的，我只是为了测试而做的）不再使导航栏居中，而是将其扩展到更靠右的地方。
.navbar .navbar-collapse {
white-space: nowrap;
width:2000px;
}
Any advice how I can use the whole navbar width for the navbar items?
有什么建议可以为导航栏项目使用整个导航栏宽度吗？
EDITNo clue how to put this in a jsfiddle or something, since this is automatically generated as said by R and shiny. But here is the relevant HTML:
编辑不知道如何将它放在 jsfiddle 或其他东西中，因为这是自动生成的，如 R 和闪亮的所说。但这里是相关的 HTML：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2538">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"></span>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-2538">
<ul class="nav navbar-nav">
<li class="active">
<a href="#tab-3459-1" data-toggle="tab" data-value="TestA">TestA</a>
</li>
<li>
<a href="#tab-3459-2" data-toggle="tab" data-value="TestB">TestB</a>
</li>
<li>
<a href="#tab-3459-3" data-toggle="tab" data-value="TestC">TestC</a>
</li>
<li>
<a href="#tab-3459-4" data-toggle="tab" data-value="Test1">Test1</a>
</li>
<li>
<a href="#tab-3459-5" data-toggle="tab" data-value="Test2">Test2</a>
</li>
<li>
<a href="#tab-3459-6" data-toggle="tab" data-value="Test3">Test3</a>
</li>
<li>
<a href="#tab-3459-7" data-toggle="tab" data-value="Test4">Test4</a>
</li>
<li>
<a href="#tab-3459-8" data-toggle="tab" data-value="Test5">Test5</a>
</li>
<li>
<a href="#tab-3459-9" data-toggle="tab" data-value="Test6">Test6</a>
</li>
<li>
<a href="#tab-3459-10" data-toggle="tab" data-value="Test7">Test7</a>
</li>
<li>
<a href="#tab-3459-11" data-toggle="tab" data-value="Test8">Test8</a>
</li>
<li>
<a href="#tab-3459-12" data-toggle="tab" data-value="Test9">Test9</a>
</li>
<li>
<a href="#tab-3459-13" data-toggle="tab" data-value="Test10">Test10</a>
</li>
<li>
<a href="#tab-3459-14" data-toggle="tab" data-value="Test11">Test11</a>
</li>
<li>
<a href="#tab-3459-15" data-toggle="tab" data-value="Test12">Test12</a>
</li>
</ul>
</div>
</div>
</nav>
采纳答案by davidkonrad
This is due to the Bootstrap responsive design. Read about disabling responsiveness here -> http://getbootstrap.com/getting-started/#disable-responsive
这是由于 Bootstrap 响应式设计。在此处阅读有关禁用响应的信息 -> http://getbootstrap.com/getting-started/#disable-responsive
I dont know how far you want to go regarding resetting responsiveness, if your concern just is the navbar you could perhaps be satisfied with
我不知道您想在重置响应能力方面走多远，如果您关心的只是导航栏，您可能会感到满意
.container {
width: 100%;
white-space: nowrap;
}
see demo -> http://jsfiddle.net/gfpua400/
看演示 -> http://jsfiddle.net/gfpua400/
It will of course still break if the width of the parent element (here the body) is too small to fit all your .icon-bar<span>elements, but this is just normal HTML rendering I guess you are aware of (can still be prevented too though)
如果父元素的宽度（此处为body）太小而无法容纳所有.icon-bar<span>元素，它当然仍然会中断，但这只是正常的 HTML 渲染，我想您已经知道了（尽管仍然可以防止）
回答by Daniel Tung
Bootstrap uses a grid system and containers to control widths and spacing.
You are using a <div class="container">for your navbar, change this to <div class="container-fluid">.
Bootstrap 使用网格系统和容器来控制宽度和间距。您正在<div class="container">为导航栏使用 a ，请将其更改为<div class="container-fluid">。
You do not need to add any custom CSS and where possible avoid custom CSS unless you know what you're overriding as it could break page flow.
您不需要添加任何自定义 CSS，并尽可能避免使用自定义 CSS，除非您知道要覆盖的内容，因为它可能会破坏页面流。
See http://getbootstrap.com/css/#overview-containerfor more information on this.
回答by saujan ghimire
- getbootstrap.com/components says you require Javascript plugin did you include it correctly?
- Do you have another container wrapped before it or did you use the navbar-header as the container?
- Have you tried using chrome debugger and such? Usually you can fiddle with the CSS to see the effects realtime but I would recommend against changing the bootstrap CSS as this should work for the task at hand.
- getbootstrap.com/components 说您需要 Javascript 插件，您是否正确包含了它？
- 您之前是否包裹了另一个容器，或者您是否使用导航栏标题作为容器？
- 您是否尝试过使用 chrome 调试器等？通常你可以摆弄 CSS 来实时查看效果，但我建议不要更改引导 CSS，因为这应该适用于手头的任务。
Youve updated with some code I will first fiddle and update ^^
您已经更新了一些代码，我将首先摆弄并更新 ^^
So after ..
所以之后..
Removing the div container helped now it uses the full width of the document.. could you try that?
删除 div 容器现在有帮助，它使用文档的全宽..你能试试吗？
That is the <div class="container">line and also remove one of the closing div </div>after </ul>list
这就是<div class="container">行，并</div>在</ul>列表之后删除一个关闭的 div
sorry for the large edits this is my first post :)
抱歉进行了大量编辑，这是我的第一篇文章:)
