Bootstrap導航菜單去新線

我正在一個相當大的標誌和大菜單的網站上工作。Bootstrap導航菜單去新線

問題是當頁面寬度減小時，引導菜單項（與<a>標籤和菜單項）一起變成新行，即使有空的空間也可以佔用。

有人可以解釋爲什麼會發生這種情況嗎？

注：

在視寬996px，標誌和菜單都在同一線路上有在視寬986px權
足夠的空間，菜單現在進入到第二行即使（我覺得）它應該佔據的空間向右

樣品JS-小提琴：

https://jsfiddle.net/ahmed_anas/oq09gksL/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse" style=" 
 
    /* float: right; */ 
 
    /* width: 0px; */ 
 
"> 
 
      <ul class="nav navbar-nav"> 
 
      
 
    <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
    <li class="active"><a href="#">Home</a></li><li class="active"><a href="#">Home</a></li> 
 
      
 
      <li><a href="#about">About</a></li><li><a href="#about">About</a></li> 
 
      
 
      <li><a href="#contact">Contact</a></li><li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav>

來源

2016-03-12 Ahmed-Anas

爲什麼你有3家，3約3接觸按鈕？ –

是的。更具體地說，我希望他們儘可能保持同一條路線。 –

如果我刪除克隆按鈕，它在這裏很好用; –

我想這是因爲在div容器，這迫使它有750px寬當視域寬度小於992px媒體查詢。在鉻檢查員，你可以看到媒體查詢如下：

@media (min-width: 992px) 
.container { 
    width: 970px; 
} 
@media (min-width: 768px) 
.container { 
    width: 750px; 
}

來源

2016-03-12 17:15:48 vjain27

Bootstrap導航菜單去新線

回答

相關問題