我是一个 bootstrap 新手,我使用 R 和 Shiny 构建了一个 HTML 站点,它再次使用了 Bootstrap。如果您在宽屏幕上打开页面,页面将使用整个宽度,但导航栏似乎限制在 1000 像素宽度。在这个宽度之后它会换行,所有其他元素都显示在第 2 行中。但是我想使用可能的整个宽度,直到它开始一个新行。当然,如果导航栏有太多元素,即使对于宽屏幕来说,它也应该从第二行开始,但如果还有一些屏幕空间则不会。
到目前为止这没有帮助:
.navbar .navbar-collapse {
white-space: nowrap;
width:100%;
}
设置固定的像素宽度(我不想要的,我这样做只是为了测试)不再使导航栏居中,而是将其扩展到更右边。
.navbar .navbar-collapse {
white-space: nowrap;
width:2000px;
}
关于如何将整个导航栏宽度用于导航栏项的任何建议?
编辑 不知道如何将它放在 jsfiddle 或其他东西中,因为这是按照 R 和 shiny 所说的那样自动生成的。但这里是相关的 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>
最佳答案
Bootstrap 使用网格系统和容器来控制宽度和间距。
您正在使用 <div class="container">
对于您的导航栏,将其更改为 <div class="container-fluid">
.
您不需要添加任何自定义 CSS,并尽可能避免自定义 CSS,除非您知道要覆盖的内容,因为它可能会中断页面流。
参见 http://getbootstrap.com/css/#overview-container有关这方面的更多信息。
关于html - Bootstrap 导航栏不填满整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33170205/