Bootstrap navbar не заполняет всю ширину

Question

Я новичок в начальной загрузке, и я создал сайт HTML с использованием R и Shiny, который снова использует Bootstrap. Если вы открываете страницу на широком экране, страница использует всю ширину, однако навигация по-видимому ограничена, например, шириной 1000 пикселей. После этой ширины он получает разрыв строки, и все остальные элементы отображаются в строке 2. Однако я хочу использовать всю ширину, пока она не начнет новую строку. Конечно, если у навигатора слишком много элементов даже для широких экранов, он должен начать вторую строку, но не в том случае, если осталось какое-то пространство.

Это не помогло до сих пор:

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

Установка фиксированной ширины пикселя (то, что я не хочу, я сделал это только для тестов) не центрировать Navbar больше, но extened его дальнейшее право.

.navbar .navbar-collapse { 
      white-space: nowrap; 
      width:2000px; 
    } 

Любой совет, как я могу использовать всю ширину навигатора для элементов навигации?

EDIT Нет понятия, как поместить это в 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

Я не знаю, как далеко вы хотите идти о сбросе отзывчивость, если ваша проблема просто является Navbar вы могли бы, возможно, быть удовлетворены

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

см демо - >http://jsfiddle.net/gfpua400/

это, конечно, еще сломается, если ширина родительского элемента (здесь body) слишком мал, чтобы вместить все ваши .icon-bar<span>, но это просто нормальный HTML-рендеринг. Я думаю, вы знаете (все равно можно предотвратить)

Answer 2

1. getbootstrap.com/components говорит вам требуется Javascript плагин вы включили его правильно?
2. У вас есть другой контейнер, завернутый перед ним, или вы использовали навигационную панель в качестве контейнера?
3. Вы пробовали использовать хром-отладчик и т. Д.? Обычно вы можете играть с CSS, чтобы увидеть эффекты в реальном времени, но я бы рекомендовал не менять загрузочный CSS, поскольку это должно работать для этой задачи.

Youve обновляется с некоторым кодом я первая скрипка и обновление ^^

Так после ..

Удаление контейнера DIV помогло теперь использует всю ширину документа .. Вы могли бы попробовать что?

Это <div class="container"> линии, а также удалить одну из закрывающей DIV </div> после </ul> списка

жаль больших правок это мой первый пост :)

Answer 3

Bootstrap использует систему сетки и контейнеры для управления ширинами и интервалами. Вы используете <div class="container"> для своего навигатора, измените это на <div class="container-fluid">.

Вам не нужно добавлять какие-либо пользовательские CSS и по возможности избегать пользовательских CSS, если вы не знаете, что вы переопределяете, так как это может сломать поток страниц.

См. http://getbootstrap.com/css/#overview-container для получения дополнительной информации об этом.