css - Bootstrap 导航栏固定在右侧

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 行为冲突。所以您看不到切换菜单图标。如果您从周围的 div 中删除 style="width:850px; margin-left:auto"，您将看到漂亮的切换图标随着您收缩和展开窗口而出现和消失。但随后，您就失去了坚持正确的行为。

那么问题来了。似乎坏人是周围 div 的宽度设置。但是我不知道如何在不设置元素宽度的情况下让 margin-auto(或其他任何东西)工作。有任何想法吗？我已经尝试了各种东西、花车等，但似乎没有任何效果。

更新 再进行几次实验，我可以看到宽度设置将切换图标推离了屏幕。我该如何阻止这个...？也许使用位置？

Answer 1

作为一种无需触及太多代码即可快速解决此问题的方法，您可以将 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 .