文章詳情頁
boostrap怎么在移動端不顯示sidebar?
瀏覽:225日期:2024-05-26 09:15:36
問題描述
在平板或者電腦上面想采用兩欄式布局,但是放到手機上面后想不顯示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. 測試自動化html元素選擇器元素ID或DataAttribute [關閉]2. 在mac下出現了兩個docker環境3. 利用IPMI遠程安裝centos報錯!4. 運行python程序時出現“應用程序發生異常”的內存錯誤?5. spring-mvc - spring-session-redis HttpSessionListener失效6. java - Spring boot 讀取 放在 jar 包外的,log4j 配置文件,系統有創建日志文件,不寫入日志信息。7. 淺談Vue使用Cascader級聯選擇器數據回顯中的坑8. javascript - 在 model里定義的 引用表模型時,model為undefined。9. javascript - 最近用echarts做統計圖時遇到兩個問題!!10. mysql - 查詢 修改數據庫優化問題吧
排行榜

網公網安備