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

如果你不能让它起作用，那么小提琴或其他东西就会有用。