文章详情页
boostrap怎么在移动端不显示sidebar?
问题描述
在平板或者电脑上面想采用两栏式布局,但是放到手机上面后想不显示sidebar。
p.s: 因为两栏式的话在手机上面内容装不下,但自动浮动到下面就没有sidebar导航这个作用了。
<div class="container""> <div class="row"><div id="content" class="col-sm-6">一些文字</div><div id="sidebar" class="col-sm-offset-1 col-sm-5">一些文字</div> </div><!-- /.row --></div><!-- /.container -->
问题解答
回答1:使用媒体查询,判断当前视窗宽度在小于某个值(比如一般小于某个值就是平板或者手机视窗)的时候,隐藏siderbaer,举个例子:
@media screen and (max-width: 300px) {div { display:none;}
}
回答2:v3.bootcss.com/css/#responsive-utilities-classes
直接给那个sidebar的dom加个hidden-xs的class就搞定了。
相关文章:
1. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!2. font-family - 我引入CSS3自定义字体没有效果?3. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?4. macos - mac下docker如何设置代理5. dockerfile - [docker build image失败- npm install]6. objective-c - iOS开发支付宝和微信支付完成为什么跳转到了之前开发的一个app?7. PHP中的$this代表当前的类还是方法?8. angular.js - 求一款angular插件9. java - 我用Tomcat访问SQL server数据库时,出现以下错误,该怎么解决?10. docker start -a dockername 老是卡住,什么情况?
排行榜