更改Bootstrap导航丸的宽度和外观

Question

我有一个使用导航丸设置的导航栏。 我的酒吧水平且合理，因此它们都很好地排列在一起，但是我想更改导航药丸的宽度，以便与网站上的所有其他内容一起使它们更均匀。 这是我的导航栏代码：

<div class="container" id="buttonBar">
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="index.html">HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li><a href="video.html">VIDEO</a></li>
  <li><a href="photo.html">PHOTOGRAPHY</a></li>
  <li><a href="artists.html">ARTIST PORTFOLIOS</a></li>
</ul>
</div>

在我制作的自定义CSS文件上，我尝试执行以下操作：

.nav .nav-pills .nav-justified li a {
    width: 50px;
}

但无济于事。 我这样做的正确方法是什么？ 还有谁能告诉我如何同时更改文本和导航丸的颜色？ 我想使背景色透明。

Answer 1

您的CSS选择器不正确。 前三个类之间的空格表示它们是子类，而不是元素具有所有三个类。

试试这个代替：

.nav.nav-pill.nav-justified li a {
    width: 50px;
}

如果您无法使其正常工作，则可以使用小提琴或其他工具。