Элементы меню "Bootstrap navbar" для выравнивания/диапазона, занимающие всю ширину

Я использую утилиту Twitter Bootstrap по умолчанию Twitter (без логотипа и поиска), но я хочу, чтобы элементы меню были натянуты, занимая всю ширину строки меню.

Вот то, что у меня есть по умолчанию для Bootstrap navbar (см. --- как пробелы):

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

и результат, который мне нравится (элементы меню занимают полную ширину):

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

Я надеюсь, что кто-то может помочь.

Ответ 1

Посмотрите на Bootstrap официальный пример:

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Ответ 2

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

* обратите внимание на " > ", это приведет к тому, что стиль перестанет истекать кровью в поддиапазоне .dropdown-menu.

/* Customize the navbar links to be fill the entire space of the .navbar */

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav > li {
    display: table-cell;
    width: 1%;
    float: none;
    text-align: center;
}


.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Ответ 3

.nav {
  display:table;
}
.nav > li{
  width: auto;
  display:table-cell;
}

" width: auto;" решила проблему для меня

Ответ 4

Другое решение: медиа-запросы, которые настраивают добавление меню для каждого элемента:

@media (max-width: 1200px) {

  .navbar .nav > li {
      padding: 0 4px 0 3px;
  }

}

@media (min-width: 1200px) {

  .navbar .nav > li {
      padding: 0 20px 0 20px;
  }

}

Ответ 5

этот последний пример здесь тоже не работает для меня, dropdownmenu всегда появляется в первом элементе li.

установка ширины основных элементов li с помощью jquery - единственное, что сработало для меня, по строкам

setNavWidth: function(){
    var wi = parseInt(($('#navcontainer').width()-48)*.25);
    for( var i = 0 ; i < 4; i++){
        $('#carvernavli_'+i).width(wi);
    }

}

поэтому у меня есть 4 основных элемента li и дал им идентификатор, "navcontainer" ist контейнер, который переносит навигацию непосредственно под "navbar-inner". вы также должны вызвать эту функцию при изменении размера окна, чем это работает!