?

?

媒體查詢

/* 超小屏幕（手機，小于 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） *//* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }

我們偶爾也會在媒體查詢代碼中包含?max-width?從而將 CSS 的影響限制在更小范圍的屏幕大小之內。

@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

?

柵格參數

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

?超小屏幕?手機 (<768px)小屏幕?平板 (≥768px)中等屏幕?桌面顯示器 (≥992px)大屏幕?大桌面顯示器 (≥1200px)柵格系統行為.container?最大寬度類前綴列（column）數最大列（column）寬槽（gutter）寬可嵌套偏移（Offsets）列排序

總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變為水平排列C
None （自動）	750px	970px	1170px
.col-xs-	.col-sm-	.col-md-	.col-lg-
12
自動	~62px	~81px	~97px
30px （每列左右均有 15px）
是
是
是

?

?

實例:

縮放瀏覽器大小查看效果

<div class="row">
　　<div class="col-xs-1 col-sm-4 col-md-1 col-lg-10">4</div>
　　<div class="col-xs-1 col-sm-4 col-md-1 col-lg-1">4</div>
　　<div class="col-xs-1 col-sm-4 col-md-10 col-lg-1">4</div>
</div>

?

效果:

?

?

?

?

?

?

?

?

?

參考api:http://v3.bootcss.com/css/#grid

轉載于:https://www.cnblogs.com/ooo0/p/7998580.html

總結

以上是生活随笔為你收集整理的bootstrap 栅栏系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。