Bootstrap 添加容器类破坏导航答案

【问题标题】：Bootstrap adding container class ruins navigationBootstrap 添加容器类破坏导航
【发布时间】：2017-07-31 17:25:14
【问题描述】：

添加容器类的引导程序会破坏导航活动和悬停状态，我没有使用响应式实用程序或网格系统我已经下载了自定义引导程序，这里是使用和不使用容器类的结果。第一张图片来自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>

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

我不知道你是否解决了这个问题，但根据我使用 Bootstrap 的经验，你不会使用 container 和 <nav>。在你的情况下，我会删除 <div class="navbar-inner"> 和 <div class="container-nav">。

【讨论】：