如何添加文字来引导移动菜单(How to add text to bootstrap mobile

2019-10-20 23:24发布

我想添加一些文本在移动设备上显示的引导菜单。 目前,3图标条显示为菜单上的右侧的按钮,当浏览器窗口宽度低于媒体查询阈值。 有一个关于我想添加一些文字菜单栏左侧的所有空白区域。 无论我到目前为止已经试过要么显示正常菜单上的文字,或显示一个按钮框内。 任何人都可以提出来做到这一点的最好方法是什么?

恩。

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

Answer 1:

您可以通过实现这个引导程序响应的实用工具类 。

因此这样做:

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

工作实例



文章来源: How to add text to bootstrap mobile menu