如何防止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