css - 防止 Bootstrap 导航栏在调整为小窗口时向下跳转

Question

这是我的标记的链接，它 100% 依赖于 Bootstrap:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-align-justify menu-icon"></span>             
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right" style="margin-right: 6px;">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-user user-icon"></span>
            <b class="caret"></b>              
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
  </div><!-- /.container-fluid -->
</nav>

在代码笔上:http://codepen.io/dsparry/pen/qEJen

当您缩小窗口时，您会看到右侧的图标跳到左侧图标下方，并使导航栏变大。

我希望导航栏和图标位置在调整窗口大小时保持不变。换句话说，我不想改变任何事情。我曾尝试使用自定义 CSS 覆盖 Bootstrap，但一直无法弄清楚。

有什么想法吗？我应该包含什么 CSS 以防止在调整窗口大小时图标跳下来？

Answer 1

你有2个ul

将类添加到第一个 ul : col-xs-6

向第二个 ul 添加类:col-xs-6 text-right pull-right

编辑:这会破坏您的布局。

您应该有一个 UL，其预期的右对齐 li 位于列表的第一个右拉位置，例如:

<ul class="navbar ...">
    <li class="pull-right ...">
    <li></li>
</ul>

如果你做一个 jsfiddle，你可以获得更好的帮助