[英]bootstrap - Hide navbar on small screen?
I have this structure:我有这样的结构:
<div class="container"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
and I'm trying to hide the right navbar on mobile screens.我正试图在移动屏幕上隐藏正确的导航栏。 I set it to xs-hidden, but it still shows up.
我将它设置为 xs-hidden,但它仍然显示。
Is there a way to hide a navbar on xs screens?有没有办法在 xs 屏幕上隐藏导航栏?
Use .hidden-xs
css class (not .xs-hidden
). 使用
.hidden-xs
css类(而不是.xs-hidden
)。
<div class="container hidden-xs"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked hidden-xs">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
To help others and you reference the Bootstrap documentation " Responsive utilities " 为了帮助他人,您可以参考Bootstrap文档“ 响应实用程序 ”
As pointed out by Nicolapps you would use .hidden-xs
正如Nicolapps指出的,您将使用.hidden
.hidden-xs
<div class="container">
<section class="row"
<div class="hidden-xs col-sm-10">
<p>content</p>
</div>
<div class="hidden-xs col-sm-2">
<p>content</p>
</div>
</section>
</div>
You can try something llike this stuff you should set icon pointer events as none 您可以尝试类似的东西,应该将图标指针事件设置为none
.container {
position: relative
}
i {
position: absolute;
top: npx;
left: npx;
pointer-events: none;
}
select {
font-size: 0;
}
for bootstrap 5对于引导程序 5
use使用
.d-none.d-sm-block .d-none.d-sm-块
ref: https://getbootstrap.com/docs/5.0/utilities/display/参考: https://getbootstrap.com/docs/5.0/utilities/display/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.