Bootstrap 柵格系統之列排序

列排序

.col-md-push-(指定的列數):push 將元素向右推動 * 指定的列數.

.col-md-pull-(指定的列數):pull 將元素向左拉動 * 指定的列數

push(推)

下面是使用後的對比

div class

="container"
>
="row row-1"
>
="col-md-3 "
>main<
/div>
<
/div>
="row row-1"
>
="col-md-3 col-md-push-3"
>main<
/div>
<
/div>
<
/div>
<
/div>效果圖;
如果我們推動11格會發生什麼
="col-md-3 col-md-push-11"
>main<
/div>效果圖:
元素就會超出container,所以 指定的列數 + 本身的列數 + 前面的列數 <= 12;
pull (拉)
="container"
>
="row row-1"
>
="col-md-3 "
>main<
/div>
="col-md-3 "
>aside<
/div>
<
/div>
="row row-1"
>
="col-md-3"
>main<
/div>
="col-md-3 col-md-pull-3"
>aside<
/div>
<
/div>
<
/div>
<
/div>效果圖:
由自身的位置向左拉了3格,所以main被覆蓋了,那麼我們再將main推3格,這樣就可以實現排序了
="container"
>
="row row-1"
>
="col-md-3 "
>main<
/div>
="col-md-3 "
>aside<
/div>
<
/div>
="row row-1"
>
="col-md-3 col-md-push-3"
>main<
/div>
="col-md-3 col-md-pull-3"
>aside<
/div>
<
/div>
<
/div>
<
/div>效果圖:
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 注意 子元素若要實...