Html Bootstrap 3：有没有办法在使用小屏幕时隐藏导航栏文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22288823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Is there a way to hide navbar-text when small screens are used?
提问by CarbonandH20
I'm using bootstrap 3.1.1.
我正在使用引导程序 3.1.1。
I want the navbar-text to disappear on smaller screens. Currently, it looks disjointed on smaller screens. Preferably, it would just go away on smaller screens but as an alternative it could render nicely under the title.
我希望导航栏文本在较小的屏幕上消失。目前，它在较小的屏幕上看起来杂乱无章。最好，它会在较小的屏幕上消失，但作为替代，它可以在标题下很好地呈现。
<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>
回答by Josh Crozier
I'd suggest taking a look at the Bootstrap 3 documentation - (Responsive utilities).
我建议查看Bootstrap 3 文档 - (Responsive Utility)。
There are classes, such as hidden-xs, that can be used to hide elements for certain media queries. For example, hidden-xswill hide the element when the screen is less than 768 px.
有一些类，例如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>
You could also use a combination of visible-md/visible-lgin order to hide the element when the screen is less than or equal to 992 px.
当屏幕小于或等于 992 像素时，您还可以使用visible-md/的组合visible-lg来隐藏元素。
回答by KingBee
Bit late but this code was used on my website: logo collides navbar elements (about, product etc)
有点晚了，但此代码已在我的网站上使用：徽标碰撞导航栏元素（关于、产品等）
<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>
so brand goes from UNITED STATES OF AMERICA (responsive/resizing) to USA
所以品牌从美国（响应式/调整大小）到美国
回答by JesseEarley
Alternatively, if those helper classes don't work for you (meaning they don't hide at the screen size(s) you like), if you're including a custom stylesheet you can include your own media queries to hide just the elements you want.
或者，如果这些辅助类不适合您（意味着它们不会隐藏在您喜欢的屏幕尺寸），如果您包含自定义样式表，您可以包含您自己的媒体查询以仅隐藏元素你要。
