html - 更改 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;
}

如果你不能让它工作， fiddle 或其他东西会很有用。