css - Bootstrap3 导航栏菜单延伸到上一个单元格

Question

我正在尝试使用 bootstrap3 在一个小图形 Logo 的右侧创建一个导航栏，但是当查看时，导航栏在图像前面流血。我能做些什么来防止这种情况发生吗

HTML 是:

<div class="row nav2bg">
<div class="col-md-3">
<a rel="home" href="./" title="Carolina Wreath Company"><img style="max-height:100px;" src="mainlogo.png" class="pull-left" /></a>
</div>
<div class="col-md-9">
<header class="navbar navbar-inverse bs-docs-nav navbar-right" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav nav-justified">
<li><a href="natural.php" class="NAV2LINKS">Carolina<br />Natural</a></li>
<li><a href="blue.php" class="NAV2LINKS">Carolina <br />Blue</a></li>
<li> <a href="deluxe.php" class="NAV2LINKS">Carolina <br />Deluxe</a> </li>
<li> <a href="garlands.php" class="NAV2LINKS">Swags & <br />Garlands</a> </li>
<li> <a href="corporate.php" class="NAV2LINKS">Corporate <br />Wreaths</a>     </li>      
</ul>
</nav>
</div>
</header>
</div>
</div>

CSS 是:

.navbar-nav > li > a {padding-top:23px; padding-bottom:3px;}
.navbar {min-height:20px;}
.navbar-inverse { background-color: #FFEFB9}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #FFEFB9}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #FFEFB9}
.dropdown-menu { background-color: #FFEFB9}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #FFEFB9}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #FFEFB9}
.navbar-inverse .navbar-brand { color: #941F1F}
.navbar-inverse .navbar-brand:hover { color: #941F1F}
.navbar-inverse .navbar-nav>li>a { color: #941F1F}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #941F1F}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,             .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #941F1F}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #941F1F}
.dropdown-menu>li>a { color: #941F1F}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #941F1F}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar-nav>li { float: none; }

有什么建议吗？

Answer 1

内置的 .navbar-brand 类(带有 sample in the docs )就是为了这个目的。

<!-- navbar wrapper, with optional default/dark class -->
<nav class="navbar navbar-default">
  <!-- wrapper for fluid-width column container -->
  <div class="container-fluid">
    <!-- wrapper for your branding area next to the collapsing nav -->
    <div class="navbar-header">
      <!-- add your navbar-toggle here, it shouldn't collapse either -->
      <!-- now your responsive retina-ready branding image :D -->
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
    <!-- and lastly the collapsing nav -->
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">never gonna</a></li>
            <li><a href="#">give you up</a></li>
        </ul>
    </div>
  </div>
</nav>