如何使用引导程序仅在移动设备中添加菜单文本

Question

查看截图http://i.stack.imgur.com/3mYet.jpg

iam 使用以下引导菜单代码。

我只想在移动设备中添加诸如“菜单”之类的文字。怎么做？

<div class="row">
<div class="navbar navbar-default">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>

    <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <li><a href="index.html">MENU 1</a></li>
    <li><a href="about.html">MENU 2</a></li>
    <li><a href="food.html">MENU 3</a></li>
    <li><a href="apparels.html">MENU 3</a></li>
    </ul>
    </div>
</div>
</div> 

Answer 1

如果您只想为移动视图显示导航栏，请使用“visible-xs”类。

        <div class="row">
        <div class="navbar navbar-default visible-xs">
            <div class="navbar-header">
            <span class="Position">Menu</span>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            </div>

            <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
            <li><a href="index.html">MENU 1</a></li>
            <li><a href="about.html">MENU 2</a></li>
            <li><a href="food.html">MENU 3</a></li>
            <li><a href="apparels.html">MENU 3</a></li>
            </ul>
            </div>
        </div>
        </div>

  @media (min-width: 320px) {
.Position
{
float: left !important;
margin-left: 69%;
margin-top: 12px;
font-size: 18px;
}
}
@media (min-width: 360px) {
.Position
{
float: left !important;
margin-left: 73%;
margin-top: 12px;
font-size: 18px;
}
}