Как обосновать navbar-nav в Bootstrap 3

Я пытаюсь оправдать navbar (сделать растяжку содержимого навигатора) в Bootstrap 3. Я добавил margin: 0 auto; max-width: 1000px; в классы nav*, а также попытался добавить элемент container в качестве родителя в ul. В качестве последней проверки я сделал то, что было предложено в этом ответе, добавив navbar-justified в класс navbar, но это привело к тому, что все сработало слева без оправдывая всю навигационную панель.

Выполнение nav nav-justified ul делает центр ul, но не сохраняет стили класса navbar-nav, поскольку он не является частью ul, и он не выглядит великолепно когда экран меньше 768 пикселей.

Как оправдать Bootstrap 3 navbar?

Изменить: для тех, кто интересуется более полным ответом, вот какой код я использую в производстве:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

И вот рабочий jsFiddle. Возможно, вам придется растянуть размер окна result, чтобы он отображался правильно. Если вы заинтересованы в центрировании фактического списка без растягивания до полной ширины, см. David Taiaroa jsFiddle.

Ответы

Ответ 1

Оказывается, что по умолчанию для всех элементов navbar-nav>li есть свойство float: left, поэтому они все скрещиваются слева. Как только я добавил код ниже, он сделал navbar центрированным и не сглаженным.

.navbar-nav>li {
        float: none;
}

Надеюсь, что это поможет кому-то, кто ищет центр navbar.

Ответ 2

Вы можете обосновать содержимое навигационной панели, используя:

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}

Смотрите это в прямом эфире: http://jsfiddle.net/panchroma/2fntE/

Удачи!

Ответ 3

Чтобы оправдать настройку бутстрапа 3 navbar-nav для 100% -ной ширины, вы можете использовать этот код:

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
}

Ответ 4

Вот более простое решение. просто удалите класс "navbar-nav" и добавьте "nav-justified".

Ответ 5

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

и для css

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

см. его в прямом эфире http://www.bootply.com/103172

Ответ 6

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

   <nav class="nav navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#top">Brand Name</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsable-1">
            <ul class="nav nav-justified">
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

Этот код CSS просто удалит класс навигационной марки, когда экран достигнет 768 пикселей.

[email protected](min-width: 768px){
   .navbar-brand{
        display: none;
    }
}

Ответ 7

Привет, вы можете использовать этот ниже код для работы оправданного nav

<div class="navbar navbar-inverse">
    <ul class="navbar-nav nav nav-justified">
        <li class="active"><a href="#">Inicio</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 </div>