css - Bootstrap 添加容器类会破坏导航

Question

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

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