Bootstrap 导航栏没有填满整个宽度

Question

我是一个 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 和闪亮的所说。但这里是相关的 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>

Answer 1

Bootstrap 使用网格系统和容器来控制宽度和间距。您正在<div class="container">为导航栏使用 a ，请将其更改为<div class="container-fluid">。

您不需要添加任何自定义 CSS，并尽可能避免使用自定义 CSS，除非您知道要覆盖的内容，因为它可能会破坏页面流。

有关这方面的更多信息，请参阅http://getbootstrap.com/css/#overview-container。