At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can't solve by myself.
I am customizing the media queries, but when it comes to the links inside the navbar I am stuck. I want .brand
to be centered and the navigation links should be centered below - a new line for each link. I managed to center .brand
using this CSS code in the appropriate media query:
.brand {
display: block;
width: 100%;
text-align: center;
}
Now for the links. This is the code:
.navbar li a {
display: block;
}
The selector seems right because when I assign a background color, it shows up. But using display: block;
does not result in a new row for each link. Using width: 100%;
also does not result in the desired form.
My guess is that it has something to do with the li
each link is wrapped in.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Thomas Glaser</a>
<ul class="nav">
<li><a href="#">Arbeiten</a></li>
<li><a href="#about">Thomas</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div><!-- /.navbar-inner -->
</div>
I tried to fiddle around with the CSS, but using a trial & error method in combination with such large CSS files is not really recommended I guess, that's why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?
It's actually pretty straightforward, all you need are the following css rules:
.navbar .nav {
width: 100%;
}
.navbar .nav > li {
float: none;
text-align: center;
}
So you were right, it's the li that needs to be styled, not the anchor :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.