twitter-bootstrap - ブートストラップ正当化されたナビゲーション - アイテムの間隔をあける方法は?

Question

次のブートストラップ ナビゲーション バーを使用しています。

<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 にパディングまたはマージンを追加して、少し間隔を空ける方法を見つけることができないようです。助言がありますか？

Answer 1

次のスタイルを追加してみてください

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