[英]bootstrap - Hide navbar on small screen?
我有这样的结构:
<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>
我正试图在移动屏幕上隐藏正确的导航栏。 我将它设置为 xs-hidden,但它仍然显示。
有没有办法在 xs 屏幕上隐藏导航栏?
使用.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>
为了帮助他人,您可以参考Bootstrap文档“ 响应实用程序 ”
正如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>
您可以尝试类似的东西,应该将图标指针事件设置为none
.container {
position: relative
}
i {
position: absolute;
top: npx;
left: npx;
pointer-events: none;
}
select {
font-size: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.