Question

这是我的标记的链接，它是100％依赖于Bootstrap：

＆＃13;

<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>

＆＃13;

在codepen上：http://codepen.io/dsparry/pen/qEJen

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

我希望在调整窗口大小时导航栏和图标位置保持不变。换句话说，我不想改变任何事情。我试图用自定义CSS覆盖Bootstrap但是还没有能够解决它。

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

Answer 1

你有2个小时

将类添加到第一个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

，你可以更好地得到帮助

当调整大小到小窗口时，防止Bootstrap导航栏向下跳跃

1 个答案: