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像素時隱藏元素。

Answer 2

有點遲了但這個代碼在我的網站上使用：logo碰撞導航欄元素（關於，產品等）

<a href="Index.html" class="navbar-brand hidden-xs hidden-md hidden-sm"><span style="color:red">UNITED</span> STATES OF AMERICA</a>
<a href="Index.html" class="navbar-brand visible-xs visible-md visible-sm"><span style="color:red">U</span>SA</a>

所以品牌從美國（響應/調整大小）到美國

Answer 3

或者，如果這些幫助程序類不適合您（意味着它們不會隱藏在您喜歡的屏幕大小），如果您包含自定義樣式表，則可以包含您自己的媒體查詢以隱藏元素你要。