bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
生活随笔
收集整理的這篇文章主要介紹了
bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
.col-xs- 超小屏幕 手機 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px)
?
HTML代碼:
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
? ? ? ? ? ? ? ? ? ? ? ??
</div>
當(dāng)屏幕尺寸
小于 768px 的時候,用 col-xs-12 類對應(yīng)的樣式;
在 768px 到 992px 之間的時候,用 col-sm-9 類對應(yīng)的樣式;
在 992px 到 1200px 之間的時候,用 col-md-6 類對應(yīng)的樣式;
大于 1200px 的時候,用 col-lg-3 類對應(yīng)的樣式;
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px)
?
HTML代碼:
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
? ? ? ? ? ? ? ? ? ? ? ??
</div>
當(dāng)屏幕尺寸
小于 768px 的時候,用 col-xs-12 類對應(yīng)的樣式;
在 768px 到 992px 之間的時候,用 col-sm-9 類對應(yīng)的樣式;
在 992px 到 1200px 之間的時候,用 col-md-6 類對應(yīng)的樣式;
大于 1200px 的時候,用 col-lg-3 類對應(yīng)的樣式;
總結(jié)
以上是生活随笔為你收集整理的bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 关于空值null的排序问题 mysql
- 下一篇: spring boot 架构问题 时间处