Question

我正在创建我的第一个Bootstrap / CSS站点并且在导航时遇到了麻烦。我希望导航部分的背景是白色的标准Bootstrap Pills。但我得到的只是一个漂亮整齐的行中的页面名称，但没有＆＃39;丸＃39;他们周围和页面背景保持不变。我做错了什么？

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 STYLESHEET如下：

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药片和背景

1 个答案: