Question

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">。

Bootstrap添加容器类废墟导航

1 个答案: