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

Question

我是一个引导新手，我已经使用 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">，请将其更改为<div class="container-fluid">。

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

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

Answer 2

这是由于 Bootstrap 响应式设计。在此处阅读有关禁用响应的信息 -> http://getbootstrap.com/getting-started/#disable-responsive

我不知道你想在重置响应方面走多远，如果你关心的只是导航栏，你可能会满意

.container {
    width: 100%;
    white-space: nowrap;
}

查看演示 -> http://jsfiddle.net/gfpua400/

如果父元素（这里是body）的宽度太小而无法容纳所有.icon-bar <span> 元素，它当然仍然会中断，但这只是正常的HTML 渲染我猜你知道的（不过还是可以预防的）

Answer 3

1. getbootstrap.com/components 说您需要 Javascript 插件，您是否包含正确？
2. 您之前是否包装了另一个容器，或者您是否使用了 navbar-header 作为容器？
3. 您是否尝试过使用 chrome 调试器等？通常你可以修改 CSS 来实时查看效果，但我建议不要更改引导 CSS，因为这应该适用于手头的任务。

你已经更新了一些代码，我将首先摆弄并更新 ^^

所以在..之后

删除 div 容器有助于现在它使用文档的整个宽度。你可以试试吗？

即<div class="container"> 行，并在</ul> 列表之后删除关闭div 之一</div>

抱歉，这是我的第一篇文章 :)