Содержимое центра в ответном бутстрапе navbar

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

   Navigation             

https://jsfiddle.net/amk07fb3/

Я думаю, что это то, что вы ищете. Вам нужно удалить 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/

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

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

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

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

   

Если вы хотите, чтобы затем выровняли содержимое тела в центре navbar, вы также помещаете это содержимое тела в тег container Bootstrap.

 

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

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

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

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

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

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

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

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

  

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

  

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 на class. : D

Обновление 2018 года

Бутстрап 4

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

Бутстрап 3

Еще один сценарий, на который, похоже, пока не ответил, – это центрирование как брендов, так и навигационных ссылок . Вот решение ..

 .navbar .navbar-header, .navbar-collapse { float:none; display:inline-block; vertical-align: top; } @media (max-width: 768px) { .navbar-collapse { display: block; } } 

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

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

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

Это было протестировано с помощью Bootstrap V3.3.7

 

I am centered text

V4 из BootStrap добавляет Center (justify-content-center) и Right Alignment (justify-content-end) в соответствии с: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

  

Использовать следующий html

   

И 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; } 

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

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

  .navbar-nav { position: absolute; left: 50%; transform: translatex(-50%); } 
  • Глификон Bootstrap, не отображающийся в форме
  • Twitter Bootstrap: div в контейнере со 100% высотой
  • Как использовать пространство имен для Twitter-бутстрапа, поэтому стили не конфликтуют
  • icons Bootstrap загружаются локально, но не в Интернете
  • Добавление эффекта слайда в раскрывающийся список бутстрапов
  • Внедрение jQuery DatePicker в Bootstrap modal
  • Бутстрап-grid с фиксированной оболочкой. Предотrotation стеков столбцов
  • Изменение цвета всплывающей подсказки
  • Bootstrap 3 - просмотр рабочего стола на мобильном устройстве
  • Многостраничное раскрывающееся меню Twitter Bootstrap
  • Бутстрап 3 Размер желоба
  • Interesting Posts
    Давайте будем гением компьютера.