新行上显示的字形图标

Posted 2023-03-06

【中文标题】新行上显示的字形图标

【英文标题】：Glyphicon showing on new line

【发布时间】：2014-07-16 14:43:34

【问题描述】：

Bootply

注意：我自定义了引导菜单。代码如下。我需要将字形图标放在“书”旁边，但它会以小分辨率中断到下一行。

<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" >    </a>
    </div>
    <div class="navbar-header-sm">
      <a class="navbar-brand" href="#"><img src="assets/images/logo_sm.png" ></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;
  

【问题讨论】：

我建议把它放到 jsfiddle.net 中，让人们更容易编辑和提供解决方案。没关系，BeatAlex 已经把它放在 Bootply 中了！

或者至少有一个问题的图像

不确定这是否有助于解决您的问题，但您的导航栏中的组件对齐已关闭，而不是向右拉，您应该使用 navbar-right。见getbootstrap.com/components/#navbar

@DavidCorbin 这是问题的图像。如您所见，字形图标在 iPhone res 中中断到下一行。 imgur.com/3AjIdSW

我目前正在测试移动 stackexchange 应用程序并且无法使用计算机，但如果它适合您的需求，我会推荐 Bootswatch bootswatch.com

【参考方案1】：

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

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