ブートストラップ追加コンテナクラスの遺跡ナビゲーション

Question

ブートストラップ追加コンテナクラスの遺跡ナビゲーションアクティブとホバー状態imレスポンシブルユーティリティやグリッドシステムを使用していません。ここではコンテナクラスの有無にかかわらず結果をカスタマイズできます。最初の画像はあなたがこの問題を解決した場合、私は知らないが、ブートストラップを使用して、私の経験では、あなたが使用していない......のPhotoshopから

.navbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-radius: none !important; 
 
} 
 

 
.navbar-default { 
 
    background-color:#009c82; 
 
    background-image: none; 
 
    background-repeat: no-repeat; 
 
    border-radius: none !important; 
 
    border: none; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .navbar { 
 
    border-radius: none !important; 
 
    } 
 
} 
 

 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
 
    background: #fff; 
 
    color: #333; 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 

 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
 
    color: #333; 
 
    box-shadow: none; 
 
    text-shadow: none; 
 
    background: #fff; 
 
} 
 

 
.dropdown-menu > li > a { 
 
    padding: 10px 20px; 
 
} 
 

 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
 
    background: #fff; 
 
}

<nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="navbar-inner"> 
 
      <div class="container-nav"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="">Home</a></li> 
 
        <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">About Us <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="">History</a></li> 
 
          <li><a href="">District Council Khairpur</a></li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="">Departments</a></li> 
 
        <li><a href="">Procurements</a></li> 
 
        <li><a href="">Citizen Complaints</a></li> 
 
        <li><a href="">Gallery</a></li> 
 
        <li><a href="">Contact Us</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </nav>

Answer 1

デザインですa containerと<nav>です。あなたのケースでは、私は<div class="navbar-inner">と<div class="container-nav">を削除したでしょう。