改变 Bootstrap Nav-Pills 的宽度和外观

Question

我有一个使用 nav-pills 设置的导航栏。我的栏是水平的并且是对齐的，所以它们都很好地排列，但我想改变导航药丸的宽度，这样我就可以让它们与网站上的其他所有东西更接近。这是我的导航栏代码：

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

如果你不能让它工作，一个小提琴或其他东西会很有用。