[英]Bootstrap 3: Is there a way to hide navbar-text when small screens are used?
我正在使用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>
我建议看一下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像素时隐藏元素。
有点迟了但这个代码在我的网站上使用: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>
所以品牌从美国(响应/调整大小)到美国
或者,如果这些帮助程序类不适合您(意味着它们不会隐藏在您喜欢的屏幕大小),如果您包含自定义样式表,则可以包含您自己的媒体查询以隐藏元素你要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.