面对引导图标对齐问题答案

【问题标题】：Facing Bootstrap Icons alignment issue面对引导图标对齐问题
【发布时间】：2015-12-31 01:02:30
【问题描述】：

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

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

我不想要折叠栏。我希望将图标固定在右侧。

【问题讨论】：

i.stack.imgur.com/Ilu0B.png
@SureshPonnukalai ：这是乱码。
codepen.io/b0y/pen/pgNKvx

标签： css twitter-bootstrap navbar

【解决方案1】：

@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

【讨论】：

【解决方案2】：

将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

【讨论】：

你好家伙，一切都很好，但我不想要按钮。我也想把它们垂直对齐在右边。
我可以添加 HTML CSS 和 JS，不能在这些网站上添加 Glyphicon 字体 :(