引導導航欄顯示

Question

自舉導航欄寬度依賴於它的內容並在屏幕尺寸。

對於小屏幕尺寸，導航欄標題打包在一個按鈕中，對於大屏幕尺寸，如果有足夠的空間，標題都對齊。

對於中間屏幕尺寸，其結果可能是非常麻醉劑像如下圖所示：

它是否給辦法有一個單一的下拉按鈕，或者如果對齊所有標題有足夠的空間，但爲了防止在na-barbar內容之間進行配置？

這裏是與上面的示例的小提琴：https://jsfiddle.net/bb61c412/165/

並且相應的代碼。

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
 

 
<div class="navbar navbar-default navbar-fixed-top "> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 

 
     <a href="#" class="navbar-brand">website</a> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-main"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">a long Title1</a> 
 
     </li> 
 
     <li class="active"><a href="#"> a long Title2</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">a long Title3 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" aria-labelledby="themes"> 
 
      <li><a href="#"> Item1</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item2</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#"> Item3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="active"><a href="#">a long Title4</li> 
 
      <li class="active"><a href="#">a long Title5</li> 
 
      <li class="active"><a href="#">a long Title6</li> 
 
      <li class="active"><a href="#">a long Title7</li> 
 
      <li class="active"><a href="#">a long Title8</li> 
 
      
 

 

 
      </ul> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

您可以覆蓋默認斷點的導航欄值，以便欄本身被隱藏，並且漢堡按鈕保持可見狀態，直到屏幕寬度變大爲止。使用類似：

@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

對媒體查詢max-width的991px值是自定義斷點值可以改變。所有的

Updated fiddle

Answer 2

您可以定義自己的手機菜單中的斷點。 您可以通過自定義Bootstrap版本來完成。最簡單的方法是前往http://getbootstrap.com/customize/#grid-system並定義@ grid-float-breakpoint（例如800px）。因此，您將可以使用更改的斷點下載Bootstrap文件。

Answer 3

首先，你有很多未閉合a標籤，從TITLE4。下一步，爲了覆蓋導航欄的@media-query，Lloyd Banks已經爲這種情況寫下了非常好的解決方案。您可以將其包含在您的styles.css文件中，鏈接在bootstrap.css文件下面。我更新了的jsfiddle與封閉的標籤和新的斷點

jsfiddle