Центрирование контента в отзывчивом загрузчике navbar

221

У меня проблемы с центрированием моего контента на панели начальной загрузки. Я использую Boosttrap 3. Я прочитал много постов, но CSS или используемые методы не будут работать с моим кодом! Я очень расстроен, так что это мой последний вариант. Любая помощь будет оценена!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css twitter-bootstrap navbar Ник Л.К.
источник

457

Я думаю, это то, что вы ищете. Вам нужно удалить float: leftиз внутренней навигации, чтобы центрировать его и сделать его встроенным блоком.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

http://jsfiddle.net/bdd9U/2/

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

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

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

http://jsfiddle.net/bdd9U/3/

hajpoj
источник

Если у вас есть проблемы с дополнительным пространством под ссылками (например, если вы используете другой фон для активных ссылок), вы можете использовать:.navbar .navbar-collapse { line-height: 0px; }

jenniwren

3

Я рекомендую не играть с оригинальным bootstrap.css. Вместо этого создайте свой собственный стиль.

Файзан Мубашер

В моем случае мне пришлось удалить «flex» и заменить на «inline-block», после чего он начал работать.

The Mayer

Это идеальное решение.

Ренато Лазаро

47

Оригинальный пост спрашивал, как центрировать свернутую навигационную панель. Чтобы центрировать элементы на обычной панели навигации, попробуйте это:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

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

Раду Раскол
источник

23

Есть другой способ сделать это для макетов, которые не должны помещать панель навигации внутри контейнера, и которые не требуют переопределений CSS или Bootstrap.

Просто поместите div с containerклассом Bootstrap вокруг панели навигации. Это будет центрировать ссылки внутри панели навигации:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

Если вы хотите выровнять содержимое тела по центру панели навигации, вы также поместите это содержимое в containerтег Bootstrap .

<div class="container">
  <! -- body content here -->
</div>

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

Вы можете увидеть результаты в этой полной странице JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Источник: http://jsfiddle.net/bdd9U/229/

Эрик С. Буллингтон
источник

13

Хм, это решение, похоже, больше не работает. Ваш пример теперь выровнен по левому краю.

Бьярте Ауне Олсен

не работал для меня, но ценю простоту вашего решения!

Бен Казалино

12

Этот код работал для меня

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

Шухад Заман
источник

8

Для Bootstrap 4:

Просто используйте

<ul class="navbar-nav mx-auto">

mx-auto сделает всю работу

Хезы зив
источник

8

Обновление 2020 ...

Bootstrap 4

Центрирование контента Navbar проще, чем Bootstrap 4, и вы можете увидеть много сценариев центрирования, объясненных здесь: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Другой сценарий , который , кажется, не было еще ответить , является центрирование как на бренд и NavBar ссылки . Вот решение ..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

Также см .: Bootstrap NavBar с левыми, центральными или правыми выровненными элементами

Zim
источник

4

с официального сайта начальной загрузки (и, почти, как сказал Эрик С. Буллингтон.

https://getbootstrap.com/components/#navbar-default

Пример navbar выглядит так:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

центрировать навигацию, вот что я сделал:

<div class="container-fluid" id="nav_center">

CSS:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

работайте с class = "container" и navbar-right или left, и, конечно, вы можете заменить id на класс. : D

NoZero
источник

3

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

Это было проверено с Bootstrap V3.3.7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>

Томми Мэй
источник

2

это должно работать

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

Govan
источник

1

Используйте следующий HTML

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

И CSS

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

Изменить в соответствии с вашими потребностями

Александр Горелик
источник

1

V4 BootStrap добавляет Center (justify-content-center) и выравнивание прав (justify-content-end) согласно: https://v4-alpha.getbootstrap.com/components/navs/#horizont-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Кодер
источник

Вы уверены, что это работает? Я пытался, но так как мои li - полная ширина, это не имеет значения

gota

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

Кодер

Центрирование контента в отзывчивом загрузчике navbar

Ответы: