Как центрировать вкладки начальной загрузки Twitter на странице?

76

Я использую twitter bootstrap для создания вкладок togglable. Вот css, который я использую:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

Этот html отображает вкладки правильно, но тянут влево (что и должно произойти). Я попытался поработать с CSS, чтобы получить вкладки в центре на странице, но пока не удалась. Я думал, что кто-то, у кого больше опыта работы с CSS, будет знать, как это сделать.

В качестве примечания есть еще один вопрос о центрировании навигационных таблеток, которые я пробовал, но он не работал с простыми навигационными вкладками.

Спасибо.

Теги:

5 ответов

214
Лучший ответ

nav-tabs Элементы списка автоматически перемещаются слева от загрузочного лотка, поэтому вам нужно reset, а вместо этого отображать их как inline-block, а в пункты центрального меню мы должны добавить атрибут text-align:center в контейнер, например:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Демо: http://jsfiddle.net/U8HGz/2/show/ Редактировать здесь: http://jsfiddle.net/U8HGz/2/

Изменить: исправленная версия, которая работает в IE7 +, предоставленная пользователем. @My Head Hurts вниз в комментариях ниже.

Демо: http://jsfiddle.net/U8HGz/3/show/ Редактировать здесь: http://jsfiddle.net/U8HGz/3/

Поделиться
  • 3
    Если вы добавите *display: inline; *zoom: 1; тогда это также будет работать в IE7 ( display: inline-block не поддерживается). jsfiddle.net/U8HGz/3
  • 1
    @MyHeadHurts, о-о-о-о, большое спасибо, я не обращал внимания на старые версии IE, так как я начал работать над поддержкой только IE8 +, но ваше исправление исправно и требуется, так как загрузчик официально поддерживает IE7 +. Обновил мой ответ.
Показать ещё 7 комментариев
17

Принятый ответ совершенен. Его можно настроить так, чтобы вы могли использовать его рядом со стандартными выровненными слева вкладками.

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

Чтобы использовать его, добавьте "центрированный" класс в ваш элемент tabs

<ul class="nav nav-tabs centered" >
..
</ul>
Поделиться
9

nav-justified работает для меня.. Это не только центрирует вкладки, но и красиво распределяет их вверху. так:

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

Несмотря на то, что принятый ответ работает хорошо, я нашел выше более естественным для загрузки

Поделиться
1

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

<div class="col-sm-4 col-sm-offset-4">.

Поэтому вы получаете свою навигацию в середине страницы (также отзывчивое решение) с 4 столбцами, свободными слева и справа.

Я нашел сетку очень полезной для создания интерактивных веб-страниц. Удачи!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>
Поделиться
0

Просто добавив

margin-left:50%;

когда я настраивал свои вкладки, работал на меня.

Например,

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">
Поделиться
  • 0
    это, к сожалению, не учитывает ширину или укладку, необходимые для правильного выравнивания.
  • 0
    не работает для адаптивного дизайна

Ещё вопросы

Сообщество Overcoder
Наверх
Меню