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响应式设计。 请阅读此处关于禁用响应的信息 - > http://getbootstrap.com/getting-started/#disable-responsive

我不知道你想要在多大程度上重新设置响应速度，如果你关心的只是导航栏你可能会满意

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

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

如果父元素（这里是body ）的宽度太小.icon-bar适合所有的.icon-bar <span>元素，它当然会破坏，但这只是普通的HTML渲染，我猜你知道（仍然可以）虽然也被阻止了）

Answer 2

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

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

有关此内容的更多信息，请参见http://getbootstrap.com/css/#overview-container 。

Answer 3

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

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

所以......

删除div容器现在帮助它使用文档的全宽..你可以试试吗？

那是<div class="container">行，并且还删除</ul>列表之后的一个结束div </div>

对不起大编辑这是我的第一篇文章:)