面对Bootstrap图标对齐问题

Question

我正在使用bootstrap导航栏，左侧有品牌名称，右侧有2个图标glyphicon glyphicon-user和glyphicon glyphicon-bell。

当我将分辨率更改为小于768时，品牌名称和两个图标都会垂直对齐，导航栏的高度会增加。

我不想要崩溃吧。我想让图标固定在右边。

Answer 1

将pull-left和pull-right与 2 navbar-header div一起使用，因为它们未附加到任何@media个查询。

试试这个

<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
  <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
  <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-user"></span></button>
  <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
</div>

Working Codepen

Answer 2

@Lior G是对的，您可以使用默认的bootstrap样式（类）来解决您的问题！

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav mobileNav pull-right">
      <li class="pull-left">
        <a href="#about"><span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:26px; color:white"></span></a>
      </li>
      <li class="pull-left">
        <a href="#" class="disabled"><i class="glyphicon glyphicon-user" aria-hidden="true" style="font-size:26px; color:white"></i></a>
      </li>
    </ul> 
  </div><!-- /.container-fluid -->
</nav>

jsfiddle-link