How to add text to bootstrap mobile menu

问题

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?

ex.

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

回答1:

You can achieve this by using the bootstrap responsive utility classes.

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>

Working Example

来源：https://stackoverflow.com/questions/25872529/how-to-add-text-to-bootstrap-mobile-menu

标签

twitter-bootstrap

text

navbar