Bootstrap 3:有没有办法在使用小屏幕时隐藏导航栏文本？

Question

我正在使用bootstrap 3.1.1.

我希望导航栏文本在较小的屏幕上消失.目前,它在较小的屏幕上看起来脱节.优选地,它会在较小的屏幕上消失,但作为替代方案,它可以在标题下很好地呈现.

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-brand">Brand</div>
            <p class="navbar-text">I want this text to disappear when screen is small</p>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <u1 class="nav navbar-nav">
            <li class="active"><a href="#">Index</a></li>
            <li><a href="link1.htm">Link 1</a></li>
            </u1>
        </div>
    </div>
</div>

http://www.bootply.com/120371

Answer 1

我建议看一下Bootstrap 3文档 - (响应实用程序).

有些类hidden-xs可用于隐藏某些媒体查询的元素.例如,hidden-xs当屏幕小于768像素时,将隐藏元素.

这里有更新的例子

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-brand">Brand</div>
            <p class="navbar-text hidden-xs">I want this text to disappear when screen is small</p>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <u1 class="nav navbar-nav">
            <li class="active"><a href="#">Index</a></li>
            <li><a href="link1.htm">Link 1</a></li>
            </u1>
        </div>
    </div>
</div>

您还可以使用visible-md/ 的组合,visible-lg以便在屏幕小于或等于992像素时隐藏元素.