Изменить щебетать загрузчик navbar

Question

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

В другом посте я читал, что вы используете это

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

Но это не сработало для меня

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

Любая помощь приветствуется

это моя разметка

макеты / приложения

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

Я также попробовал это

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

Answer 1

Вы можете центрировать свое навигационное меню, установив пункты меню в display:inline-block вместо float:left вот так:

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

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

^{Обратите внимание на класс.center в контейнере navbar}

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

И тогда вы можете нацелиться на .center класс вроде так:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}

Демо: http://jsfiddle.net/C7LWm/show/

Изменить: Забыл перераспределить элементы подменю слева, это исправление:

CSS

.center .dropdown-menu {
    text-align: left;
}

Демо: http://jsfiddle.net/C7LWm/1/show/

Answer 2

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

На самом деле есть лучший способ сделать это, затем изменить его вручную. Это сократит код, используя то, что уже есть в загрузчике Twitter.

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

Сломать
Первая строка довольно проста, так как мы создаем панель навигации, устанавливаем ее в фиксированном положении в области просмотра сверху, а затем меняем цвет с белого на черный путем инвертирования цветовой темы.

Далее мы собираемся назначить navbar-inner, который более или менее говорит, если это вообще возможно, установить минимальную высоту, и именно отсюда происходят фактические цветовые стили, а не строка выше.

Вот ВАЖНАЯ строка, так как мы отбрасываем макет флюида для панели навигации и используем только контейнер. Это устанавливает фиксированное значение с полями, по центру выравнивающее внутреннее содержимое с экраном. Это делается с помощью авто полей и установки ширины.

Этот метод будет делать то, что вы хотите, так как вы на самом деле сохраняете kb в запросах заголовка, не добавляя лишний код и правильно используя скаффолдинг с загрузчиком Twitter и не создавая лишнего раздувания кода. Я использовал этот метод в своих собственных проектах и ​​продолжаю использовать его в моем текущем проекте. Опасность изменения TBS(начальной загрузки Twitter) заключается в том, что вы теряете целостность кода, и если в будущем вы захотите что-то изменить, вы должны мысленно заметить, что вы изменили, иначе все может работать не так, как задумано.

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

Answer 3

Кроме того, если вы хотите, чтобы пробелы с обеих сторон (до "Имя проекта" и после "Выпадающий список") были симметричными, добавьте следующее:

.navbar .nav, .navbar .nav > ul
{
    float: right
}

Кроме того, кажется, что использование следующего (начиная с Bootstrap v2.0.4) по-прежнему не центрирует панель навигации:

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

Вам нужно изменить на

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

(Извлечено из образца, предоставленного Андресом Ильичем; просто он пропустил изменение)

Теперь это работает для меня...

Answer 4

Центрирующий css сверху работает хорошо только на не свернутых навигационных панелях.

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

Я использовал это маленькое исправление обтекания центрирующего css в медиа-запросе, поэтому он запускается только на не свернутых навигационных панелях:

@media (min-width: 768px) {
    .center.navbar .nav,
    .center.navbar .nav > li {
        float:none;
        display:inline-block;
        *display:inline; /* ie7 fix */
        *zoom:1; /* hasLayout ie7 trigger */
        vertical-align: top;
    }
    .center .navbar-inner {
        text-align:center;
    }
}

(протестировано с помощью bootstrap 3.1.1)