Bootstrap Pills and Background

Question

Я создаю свой первый сайт Bootstrap/CSS и столкнулся с проблемой навигации. Я хотел, чтобы фон в области навигации был белым со стандартными бутстрапными таблетками. Но все, что я получаю, это названия страниц в хорошем аккуратном ряду, но вокруг них нет «таблеток», и фон страницы остался неизменным. Что я делаю неправильно?

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