Bootstrap 药片和背景

Question

我正在创建我的第一个 Bootstrap/CSS 网站，运行遇到导航问题。我希望导航部分的背景为标准 Bootstrap 药丸的白色。但我得到的只是页面名称整齐排列，但周围没有 'pill'，页面背景保持不变。我做错了什么？

HTML代码如下

<div class="nav">
      <div class="container-fluid">
<ul class="nav nav-pills">

<li><a href="About.htm">ABOUT US</a></li>
<li><a href="HoP.htm">HOME of PEACE</a></li>
<li><a href="update.htm">NEWS UPDATE</a></li> 
<li><a href="Pastnews.htm">PREVIOUS NEWSLETER</a></li> 
<li><a href="Sponsor.htm">SUPPORT the WORK</a></li> 
<li><a href="giftaid.htm">GIFT AID</a></li> 
<li><a href="Contact.htm">CONTACT</a></li> 
 </ul>
</div>
<div>

CSS 样式表如下

.

nav background {
color: white;
}
.nav a {
  color: #0000ff;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;

}
.nav li {
    display: inline;
}

Answer 1

您的 CSS 有点格式错误。请尝试以下操作。

.nav {
    background: white;
}
.nav a {
  background: #0000ff;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
}

然后您可以像这样更改 :hover 和 .active 状态的颜色

.nav > li > a.active {
  background: #0000ff;
  color: #FFFFFF;
}
.nav > li > a:hover, .nav > li.active > a:hover {
  background: #0000ff;
  color: #FFFFFF;
}

Bootstrap 药片和背景

Bootstrap Pills and Background

css

background

button

twitter-bootstrap