boostrap怎么在移动端不显示sidebar？-PHP中文网问答

boostrap怎么在移动端不显示sidebar？

高洛峰 2016-11-05 12:20:01

[CSS讨论组]

1096

在平板或者电脑上面想采用两栏式布局，但是放到手机上面后想不显示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 -->

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

三叔2016-11-05 12:21:15 1楼

使用媒体查询，判断当前视窗宽度在小于某个值(比如一般小于某个值就是平板或者手机视窗)的时候，隐藏siderbaer,举个例子:

@media screen and (max-width: 300px) {
div {
    display:none;
}

}

赞 +0

添加回复