How can I center Twitter-Bootstrap 3 navbar links?
43743 просмотра
2 ответа
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
I have tried different methods such as
display:inline-block;margin:0 auto; text-align:center;
But I cannot get it to work.
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
EDIT:
Just like how they are centered here ^.
Ответы (2)
14 плюса
Bootstrap 3 has a nav-justified
class that can be used on nav
. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav
class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
3 плюса
Add the style
.nav{
text-align: center;
}
This will center the text in li.
These styles should be sufficient. You were trying to apply styles to to the wrong element.
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
Автор: Sushanth --
Размещён: 07.08.2013 02:32
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- twitter-bootstrap В чем разница между CLASSPATH "записями начальной загрузки" и "записями пользователей" в Eclipse?
- twitter-bootstrap Что делает селектор [class ^ = "span"]?
- twitter-bootstrap How to enable scrolling of content inside a modal?
- twitter-bootstrap How to Automatically Close Alerts using Twitter Bootstrap
- twitter-bootstrap Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
- centering Как горизонтально центрировать <div>?
- centering Best way to center a <div> on a page vertically and horizontally?
- centering Как вертикально центрировать div для всех браузеров?
- centering CSS горизонтальное центрирование фиксированного div?
- centering Текстовое поле - центрирование текста
- navbar Создание панели навигации, которая включает в себя панель поиска
- navbar Таинственный пробел между Bootstrap2 Navbar и строкой внизу
- navbar Как отцентрировать навигационную панель и расположить ее в нижней части изображения баннера
- navbar Изменить цвет начальной загрузки Navbar по ссылке?
- navbar Установить ссылку моего navbar активным с помощью начальной загрузки