Css 图标显示在新行上

注意：我自定义了我的引导菜单。代码如下。我需要字形图标在“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>

---

您只需将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> --> 

手册

我建议将其放入一个jsfiddle.net，让人们更容易编辑并提供解决方案。别担心，比阿特莱克斯已经把它放进了Bootply！或者至少有问题的图像不确定这是否有助于解决您的问题，但您的导航栏中的组件对齐已关闭，而不是向右拉，您应该使用导航栏向右拉。请看@DavidCorbin这里是问题的图像。正如您在iPhone res中看到的那样，glyphicon会转到下一行。我目前正在测试mobile stackexchange应用程序，无法访问计算机，但如果它适合您的需要，我建议使用Bootswatch

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