如何防止Bootstrap Navbar在菜单顶部堆叠品牌？

Question

我已经定制了一个基本的Bootstrap导航栏 - 这就是我真正用于项目的所有内容，在收缩时不会崩溃。但是，无论何时将菜单放到较小的窗口中，似乎都会将菜单置于菜单本身之上。

将有足够的空间来与实际菜单担心这个问题，所以我想弄清楚如何防止它这样做 - 这里是相关的脚本：

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Project</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
      </ul> 
    </div><!--/.nav-collapse --> 
</div><!--/.container-fluid --> 

而此刻它应用于我的CSS：

.navbar-collapse.collapse { 
    display: block!important; 
} 

.navbar-nav>li, .navbar-nav { 
    float: left !important; 
} 

.navbar-nav.navbar-right:last-child { 
    margin-right: -15px !important; 
} 

.navbar-right { 
    float: right!important; 
} 

.container-fluid { 
    width: 80%; 
    margin: auto; 
} 

Answer 1

你<div class="navbar-header">是一个块，只需将<a class="navbar-brand" href="#">Project</a>导入navbar块。

.navbar-brand { 
    margin-top: 3px; 
    margin-right: 15px; 
} 

.navbar-collapse.collapse { 
 
    display: block!important; 
 
} 
 

 
.navbar-nav>li, 
 
.navbar-nav { 
 
    float: left !important; 
 
} 
 

 
.navbar-nav.navbar-right:last-child { 
 
    margin-right: -15px !important; 
 
} 
 

 
.navbar-right { 
 
    float: right !important; 
 
} 
 

 
.container-fluid { 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 

 
.navbar-brand { 
 
    margin-top: 2px; 
 
    margin-right: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <a class="navbar-brand" href="#">Project</a> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li class="dropdown-header">Nav header</li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
    <!--/.container-fluid -->

Answer 2

添加下面的标记略低于<div class="container-fluid">在你的HTML。

<a class="navbar-brand" href="#">Project</a> 

下面正在捣鼓相同

Responsive navigation with bootstrap