bootstrap 对齐导航 - 如何 space 项?
bootstrap justified nav - how to space items?
我正在使用以下 bootstrap 导航栏:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#">Readings</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Aligning</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container-fluid -->
</nav>
它按预期工作,但我想在 'buttons' 之间添加一些 space。我似乎无法找到一种方法来为 li 添加填充或边距,以便它们 space 稍微超出一点。有什么建议吗?
尝试添加以下样式
@media (min-width: 768px) {
.nav-justified > li {
padding-right: 15px;
padding-left: 15px;
}
}
我假设您已经以某种方式解决了这个问题。但是万一有人来这里呢。
问题是,Bootstrap 使用 display: table-cell 作为 .nav-justified > li 元素。
@media (min-width: 768px)
.nav-justified>li {
display: table-cell;
width: 1%;
}
因此,您需要使用 border-spacing 而不是边距或填充。只需按照您自己的风格扩展 Bootstrap:
.nav-justified {
border-collapse:separate;
border-spacing:5px;
}
如果您需要更多信息,请参阅 this thread。
您可以像这样为每个 <li>
添加透明边框:
.nav-pills.nav-justified li {
border-right : 20px solid rgba(255, 255, 255, 0.00);
}
.nav-pills.nav-justified li:last-child {
border-right-width : 0px;
}
我正在使用以下 bootstrap 导航栏:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#">Readings</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Aligning</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container-fluid -->
</nav>
它按预期工作,但我想在 'buttons' 之间添加一些 space。我似乎无法找到一种方法来为 li 添加填充或边距,以便它们 space 稍微超出一点。有什么建议吗?
尝试添加以下样式
@media (min-width: 768px) {
.nav-justified > li {
padding-right: 15px;
padding-left: 15px;
}
}
我假设您已经以某种方式解决了这个问题。但是万一有人来这里呢。
问题是,Bootstrap 使用 display: table-cell 作为 .nav-justified > li 元素。
@media (min-width: 768px)
.nav-justified>li {
display: table-cell;
width: 1%;
}
因此,您需要使用 border-spacing 而不是边距或填充。只需按照您自己的风格扩展 Bootstrap:
.nav-justified {
border-collapse:separate;
border-spacing:5px;
}
如果您需要更多信息,请参阅 this thread。
您可以像这样为每个 <li>
添加透明边框:
.nav-pills.nav-justified li {
border-right : 20px solid rgba(255, 255, 255, 0.00);
}
.nav-pills.nav-justified li:last-child {
border-right-width : 0px;
}