Twitter Bootstrap - полная ширина navbar

Ответ 1

Не уверен, что класс navbar-static-top был доступен до версии 2.2.2, но я думаю, что вы можете достичь своей цели следующим образом:

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

Я собрал jsFiddle в качестве примера.

Ответ 2

Просто измените контейнер класса на контейнер-полноту следующим образом:

<div class="container-fullwidth">

Ответ 3

Извлеките навигационную панель из контейнера:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

ИЗМЕНИТЬ:

Вот что я сделал с отзывчивым навигатором. Код подходит для тела документа:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

Ответ 4

Я очень опаздываю на вечеринку, но этот ответ набирает верх в результатах поиска Google.

У Bootstrap 3 есть ответ для этого встроенного устройства, установите ваш контейнер div в вашем навигаторе на container-fluid, и он упадет до ширины экрана.

Так же:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>

Ответ 5

Вам нужно нажимать контейнер на навигационную панель.

Найди свою рабочую скрипку здесь http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>

Ответ 6

Просто замените <div class="container"> на <div class="container-fluid">, который является контейнером без полей с обеих сторон.

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

Ответ 7

Вы можете переопределить некоторые css

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

!important необходимо на всякий случай, если вы привяжете bootstrap.css к своему пользовательскому css.

И добавьте свой nav html из .container

Ответ 8

Чтобы удалить граничный радиус по углам, добавьте этот стиль в свой файл custom.css

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }

Ответ 9

Я знаю, что я немного опаздываю на вечеринку, но я обошел проблему, настроив CSS на ширину ширины 100% и установив поля l/r на 0px;

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

Ответ 10

Вы должны добавить col-md-12 к вашему внутреннему навигатору. md для рабочего стола. Вы можете выбрать другие параметры из списка параметров загрузки. 12 в col-md-12 для полной ширины. Если вы хотите полуширину, вы можете использовать 6 вместо 12. Col-MD-6.

Вот решение вашего вопроса

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>