Vertical Bootstrap导航栏按钮未对齐
问题描述:
我正在为Bootstrap为我的网站设置响应式导航栏。除了一件事之外,我主要想到了它。在屏幕为width < ~775px
的设备上,使按钮垂直堆叠而不是水平堆叠,第一个按钮向左延伸一点,与其余按钮错开。这是什么原因造成的,我该如何解决?Vertical Bootstrap导航栏按钮未对齐
的jsfiddle:https://jsfiddle.net/w10cspvv/
HTML:
<div id="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active navbutton">
<a href="/"><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Home</span></a>
</li>
<li role='presentation' class='active navbutton'>
<a href='/about.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>About</span></a>
</li>
<li role='presentation' class='active navbutton'>
<a href='/contact.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Contact</span></a>
</li>
</ul>
</div>
</nav>
</div>
CSS:
body {
background-color: black;
font-size: 16pt;
margin-top: 2em;
}
#navbar {
border: .25em solid #00aeef;
background-color: #00aeef;
border-radius: 25px;
}
.navbar {
margin-bottom: 0em;
}
.navbar-default {
border-radius: 25px;
border-color: #00aeef;
background: #00aeef;
}
.main {
font-family: Ubuntu, Tahoma, Geneva, sans-serif;
margin-left: 6em;
margin-right: 6em;
text-align: center;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
background-color: #7F00FF;
}
.squidanim {
display: none;
}
.navbutton:hover a > .squidanim {
display: block;
height: 50px;
position: absolute;
z-index: 100;
}
.navbutton {
padding-left: 2em;
padding-right: 2em;
}
.nav > li > a {
padding-top: 0;
padding-bottom: 0;
}
.nav > li > a > span {
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 978px) {
#navbar {
margin-left: 2em;
margin-right: 2em;
}
.main {
margin-left: 1em;
margin-right: 1em;
}
.navbutton {
padding-left: 0;
padding-right: 0;
}
}
答
我在这的jsfiddle固定的:https://jsfiddle.net/xpn779Lr/1/
它覆盖缺省引导程序规则
.nav-pills>li+li {
margin-left: 2px;
}
到
.nav-pills>li+li {
margin-left: 0;
}
FYI,这个CSS规则具有高度的特异性。
加号表示该样式仅适用于li直接跟在另一个li之后。 一个简单的“li”选择器会将样式应用于div中的每个li,并带有“navpills”类。
请参阅W3.org上的adjacent selectors。
我在CSS中经验不足,能否请您在答案中解释li + li的含义,以及为什么它只影响第一个?谢谢。 –
我现在明白 - 它会影响一切,但第一个。公认。谢谢! –