bootstrap柵格系統變形的解決方案

2021-08-09 08:21:29 字數 706 閱讀 4130

在用bootstrap的時候,我發現 如果只使用.col-sm-* 這個屬性在750px範圍內,div會自動變成100%,直接導致頁面結構變形!這個不是我想要的!

通過下表可以詳細檢視 bootstrap 的柵格系統是如何在多種螢幕裝置上工作的。

超小螢幕 手機 (<768px)

小螢幕 平板 (≥768px)

中等螢幕 桌面顯示器 (≥992px)

大螢幕 大桌面顯示器 (≥1200px)

柵格系統行為

總是水平排列

開始是堆疊在一起的,當大於這些閾值時將變為水平排列c

.container最大寬度

none (自動)

750px

970px

1170px

類字首.col-xs-.col-sm-.col-md-.col-lg-

列(column)數

12最大列(column)寬

自動~62px

~81px

~97px

槽(gutter)寬

30px (每列左右均有 15px)

可巢狀是

偏移(offsets)

是列排序是

這裡必須使用.col-xs-* 這樣就可以保證頁面縮放的時候頁面結構不會變形!

Bootstrap 柵格系統

目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕裝置或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義classe,還有強大的mixin用於生成更具語義的布局。2...

Bootstrap柵格系統

bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的布局。頁面中的一行,比例可以自己定義,但必須保證是12列,如果缺少...

bootstrap 柵格系統

cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...