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推到右边）与bootstrap行为冲突。因此，您无法看到切换菜单图标。如果删除style =＆＃34; width：850px;保证金左：汽车＆＃34;从周围的div中，您会看到，当您收缩并展开窗口时，漂亮的切换图标会随之而来。但是，你失去了坚持正确的行为。

所以这就是问题所在。恶棍似乎是周围div的宽度设置。但我没有看到如何在不设置元素宽度的情况下获得margin-auto（或其他任何东西）。有任何想法吗？我尝试了各种各样的东西，漂浮物等，但似乎没有任何效果。

更新还有一些实验，我可以看到宽度设置是将切换图标推离屏幕。我怎么阻止这个......？使用位置可能吗？

Answer 1

尝试在css下面设置。如果您希望将带有width:850px属性的标头用于桌面，那么请为设备重写它。 http://jsfiddle.net/n3ocdm7w/11/

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

从切换按钮中删除aria-expanded="false"，然后就可以了。

Answer 2

作为一种快速解决此问题的方法，您可以将right: 550px;添加到.navbar-toggle类，这样可以将按钮移到主标题文本附近。您可以看到your updated Fiddle here。

<强>更新

好的，与其他答案类似，请尝试添加这样的媒体查询：

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

背景颜色只是用于视觉参考，可以删除。 Updated Fiddle here

Bootstrap导航栏固定为右侧

2 个答案: