Bootstrap navbar fixed right

Question

我正在嘗試使用卓越的bootstrap 3導航欄系統創建導航欄菜單，並帶有下拉菜單等。我想粘貼到屏幕右側的窗口，以便在屏幕展開時左側出現空白區域。當屏幕收縮時，我希望它具有標準的摺疊行爲，以便菜單項被替換爲切換圖標。這是一個jsfiddle它。

<div class="header" style="width:850px; margin-left:auto"> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <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="#">Textual Communities</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Public Communities <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Communities <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Log in or register <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

現在，這是幾乎確定。如果您展開窗口，則左側會出現空白區域，而菜單欄則粘在右側邊緣。但是，一個問題：

• 如果收縮窗口，菜單項消失，很好，但你沒有看到表明您可以切換菜單，以便它再次出現在左邊，堆疊右側的漂亮的圖標垂直。

看來問題在於周圍div的寬度設置（必要時，margin-left：auto會將div推到右側）與引導行爲衝突。所以你不會看到切換菜單圖標。如果從周圍的div中刪除style =「width：850px; margin-left：auto」，您將看到，當您收縮和展開窗口時，好的切換圖標會隨之而來。但是，然後，你失去了堅持到正確的行爲。

所以這裏的問題。看來惡棍是圍繞div的寬度設置。但我沒有看到如何在沒有設置元素寬度的情況下使margin-auto（或其他）工作。有任何想法嗎？我嘗試過各種各樣的東西，花車等，但似乎沒有任何工作。

更新更多的實驗，我可以看到寬度設置是從屏幕上推開關圖標。我該如何阻止...？使用位置可能？

Answer 1

作爲解決這個問題的一種快速方法，您可以將right: 550px;添加到.navbar-toggle類中，該類將使按鈕更靠近主標題文本。你可以看到your updated Fiddle here。

UPDATE

好了類似於其他答案嘗試添加媒體這樣的查詢，而不是：

@media only screen and (max-width:767px){ 
    .header { 
     width:auto !important; 
    } 
    .navbar-header{ 
     background: red; 
} 

背景顏色只是有一個視覺參考，可以拆卸。 Updated Fiddle here。

Answer 2

嘗試在css下面設置。如果您希望在桌面上使用width:850px屬性的標題，請將其重寫爲設備。 http://jsfiddle.net/n3ocdm7w/11/

@media only screen and (max-width:760px){ 
    .header{ 
     width:100%!important; 
    } 
} 

並從切換按鈕aria-expanded="false"，那麼它會工作。