如何将文本添加到引导移动菜单 [英] How to add text to bootstrap mobile menu

问题描述

我想向移动设备上显示的引导菜单中添加一些文本.当前，当浏览器窗口宽度低于媒体查询阈值时，这3个图标栏显示为菜单右侧的按钮.菜单栏左侧有所有空白，我想添加一些文本.到目前为止，无论我尝试过什么，都可以在普通菜单上显示文本，也可以在按钮框内显示文本.谁能建议实现此目标的最佳方法?

I'd like to add some text to the bootstrap menu that appears on mobile devices. Currently the 3 icon bars display as a button on the right side of the menu when the browser window width falls below the media query threshold. There's all that empty space on the left side of the menu bar that I'd like to add some text. Whatever I've tried so far either displays the text on the normal menu, or displays it inside a button frame. Can anyone suggest the best way to accomplish this?

例如.

 <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
<span class="navbar-toggle small text-left">Text Here</span>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="../index.html">Home</a></li>
              <li><a href="../about.html">About</a></li>
              <li><a href="../glass-services.html">Services</a></li>
              <li><a href="../contact.html">Contact</a></li>
            </ul>

          </div>
        </div>
</div>

推荐答案

您可以使用因此，请执行以下操作:

Therefore do this:

<div class="navbar-header">
   <p class="navbar-text visible-xs-inline-block">Text Here</p>
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </button>
 </div>

> 工作示例

这篇关于如何将文本添加到引导移动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！