引导合理的导航 - 如何空间项目？答案

【问题标题】：bootstrap justified nav - how to space items?引导合理的导航 - 如何空间项目？
【发布时间】：2016-03-03 02:45:34
【问题描述】：

我正在使用以下引导导航栏：

<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>

它按预期工作，但我想在“按钮”之间添加一些空间。我似乎无法找到一种方法来为 li 添加填充或边距，以便它们间隔一点。有什么建议吗？

【问题讨论】：

标签： twitter-bootstrap nav nav-pills

【解决方案1】：

我假设您已经以某种方式解决了这个问题。但万一有人来这里。

问题是，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。

【讨论】：

实际上，我从来没有让它工作，只是让它独自一人。但我刚试过这个，效果很好！我唯一的修改是让border-spacing: 5px 0;这样菜单栏就不会被推离上方的标题和下方的内容。谢谢！

【解决方案2】：

尝试添加以下样式

@media (min-width: 768px) {
  .nav-justified > li {
    padding-right: 15px;
    padding-left: 15px;
  }
}

【讨论】：

不幸的是，这不起作用。它只会增加按钮内部的空间。我希望在按钮本身之间添加空间。

【解决方案3】：

您可以像这样为每个<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;
}

【讨论】：

谢谢。我在上面使用了 JirkaV 的解决方案，但看起来它的行为类似。