Rumah  >  Soal Jawab  >  teks badan

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 -->


高洛峰高洛峰2867 hari yang lalu1078

membalas semua(2)saya akan balas

  • 欧阳克

    欧阳克2016-11-14 10:38:21

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

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

    }

    balas
    0
  • 三叔

    三叔2016-11-14 10:37:57

    v3.bootcss.com/css/#responsive-utilities-classes

    直接给那个sidebar的dom加个hidden-xs的class就搞定了。

    balas
    0
  • Batalbalas