Glyphicon显示在新线上

Question

Bootply

注意:我定制了我的引导程序菜单.代码如下.我需要将glyphicon放在"book"旁边,但它会以小分辨率突破到下一行.

<nav class="navbar navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="assets/images/logo.png" alt="">    </a>
    </div>
    <div class="navbar-header-sm">
      <a class="navbar-brand" href="#"><img src="assets/images/logo_sm.png" alt=""></a>
    </div>

    <!-- <div class="text-center"> -->
      <p class="navbar-text">book</a></p>
    <!-- </div> --> 

    <ul class="nav navbar-nav pull-right">
      <li>
         <a href="#" class="toggle-transparent tof">
           <span class="glyphicon glyphicon-align-justify"></span>
           <span class="navbar-title">Table of Contents</span>
         </a>
       </li>
    </ul>
  </div><!-- /.container-fluid -->
</nav>

CSS:

.navbar-header-sm {
  @media(min-width: @screen-sm-max){

    display: none;
  }
}

.navbar-header-sm {
  @media(max-width: @screen-sm-max){

    float: left;
  }
}

.navbar-header {
  @media(max-width: @screen-sm-max){

    display: none;
  }
}

Answer 1

您可以简单地将 glyphicon 链接嵌入到 p 标记中：

    <!-- <div class="text-center"> -->
      <p class="navbar-text"><a class="navbar-brand" href="#"><img src="assets/images/logo_sm.png" alt=""></a>book</a></p>
    <!-- </div> -->