問題描述

在平板或者電腦上面想采用兩欄式布局，但是放到手機(jī)上面后想不顯示sidebar。

p.s: 因?yàn)閮蓹谑降脑捲谑謾C(jī)上面內(nèi)容裝不下，但自動(dòng)浮動(dòng)到下面就沒有sidebar導(dǎo)航這個(gè)作用了。

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

問題解答

使用媒體查詢，判斷當(dāng)前視窗寬度在小于某個(gè)值(比如一般小于某個(gè)值就是平板或者手機(jī)視窗)的時(shí)候，隱藏siderbaer,舉個(gè)例子:

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

}

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

直接給那個(gè)sidebar的dom加個(gè)hidden-xs的class就搞定了。