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"，那么它会工作。