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

检查屏幕截图

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> 

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

菜单






@介质（最小宽度：320px）{
.职位
{
浮动：左！重要；
左边缘：69%；
边缘顶部：12px；
字号：18px；
}
}
@介质（最小宽度：360px）{
.职位
{
浮动：左！重要；
左缘：73%；
边缘顶部：12px；
字号：18px；
}
}

根本不起作用，我的意思是它的位置不好。我在这里找到了更好的解决方案更好的解决方案：

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