[網格系統 ·Bootstrap v4 中文文檔 v4.6](https://v4.bootcss.com/docs/layout/grid/) 布局我們只需要加載bootstrap-grid.min.css就行了 我們需要加載\css\bootstrap-reboot.css統一各個瀏覽器的默認樣式 ## **自動布局列** | 生效閾值 | 超小 <576px | 小 ≥576px | 中 ≥768 像素 | 大 ≥992px | 超大 ≥1200px | | --- | --- | --- | --- | --- | --- | | 最大container容器寬度 | 無（自動，即可以無限小） | 540像素 | 720像素 | 960像素 | 1140像素 | | 類前綴 | `.col` | `.col-sm` | `.col-md` | `.col-lg` | `.col-xl` | | 換行閾值 | <576px換下一行 | <576px換下一行 | <768px換下一行 | <992px換下一行 | <1200px換下一行| ``` <div class="container"> <!-- --> <div class="row"> <div class="col">One of three columns（col）</div> <div class="col">One of three columns（col）</div> <div class="col">One of three columns（col）</div> </div> <!-- --> <div class="row"> <div class="col-sm">One of three columns（col-sm）</div> <div class="col-sm">One of three columns（col-sm）</div> <div class="col-sm">One of three columns（col-sm）</div> </div> <!-- --> <div class="row"> <div class="col-md">One of three columns（col-md）</div> <div class="col-md">One of three columns（col-md）</div> <div class="col-md">One of three columns（col-md）</div> </div> <!-- --> <div class="row"> <div class="col-lg">One of three columns（col-lg）</div> <div class="col-lg">One of three columns（col-lg）</div> <div class="col-lg">One of three columns（col-lg）</div> </div> <!-- --> <div class="row"> <div class="col-xl">One of three columns（col-xl）</div> <div class="col-xl"> One of three columns（col-xl）</div> <div class="col-xl">One of three columns（col-xl）</div> </div> </div> ``` \>1200px  <1200px 即再1199px效果  <992px 即再991px效果  <768px 即再767px效果  <576px 即再575px效果  ## **換行** ``` <style> /*注意w-100類只由完整的bootstrap.css中才有,如果我們加載的是bootstrap-grid.min.css則像這樣定義*/ .w-100{width: 100%!important;} </style> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="w-100"></div> <div class="col">col</div> <div class="col">col</div> </div> ```   ## **設置一列寬** ~~~html <div class="container"> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-6"> 2 of 3 (占總寬度的6/12,剩下的自動平分余下的6/12) </div> <div class="col"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-5"> 2 of 3 (占總寬度的5/12,剩下的自動平分余下的7/12) </div> <div class="col"> 3 of 3 </div> </div> </div> ~~~ ## **可變寬度內容col-xxx-auto** >[danger]注意這里例子是col-md-auto。col-lg-auto等用法一樣 ``` <div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2">1 of 3(大于992px時占2/12)</div> <div class="col-md-auto">可變寬度</div> <div class="col col-lg-2">3 of 3(大于992px時占2/12)</div> </div> <div class="row"> <div class="col">1 of 3</div> <div class="col-md-auto">可變寬度</div> <div class="col col-lg-2">3 of 3(大于992px時占2/12)</div> </div> </div> ``` 小于768px時他們是等寬的 小于992px時 1和3是等寬的 992px+時 3占2/12，2跟隨文字+padding的寬度，其余留給1 ``` <div class="row"> <div class="col">col(始終都保持等比比例)</div> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> <div class="row"> <div class="col-8">col-8(始終都保持8/12比例)</div> <div class="col-4">col-4</div> </div> <div class="row"> <div class="col-sm-8">col-sm-8(>=576px時都保持8/12比例)</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm(>=576px時都保持等比比例)</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> ``` ## **混搭** ``` <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-md-8">.col-md-8(>=768時保持8/12比例,小于時100%)</div> <div class="col-6 col-md-4">.col-6 .col-md-4(>=768時保持4/12比例，小于時等比例6/12)</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-6 col-md-4">.col-6 .col-md-4(>=768時保持4/12比例，小于時等比例6/12)</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-6">.col-6(始終等比例)</div> <div class="col-6">.col-6</div> </div> </div> ```  ## **行列** 行列類在父級上設置`.row-cols-xx-列數``.col-列數``.col-md-4``.row` ~~~html <div class="container"> <div class="row row-cols-2"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> ~~~  ~~~html <div class="container"> <div class="row row-cols-3"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> ~~~ ``` .row-cols-3>* { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } ```  ~~~html <div class="container"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> ~~~ \>=768px 四列 \>=576px 2列 \<576px 1列 ## **垂直對齊** **Internet Explorer 10-11 不支持彈性項目的垂直對齊** ``` .align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } ``` ~~~html <div class="container"> <div class="row"> <div class="col align-self-start"> One of three columns </div> <div class="col align-self-center"> One of three columns </div> <div class="col align-self-end"> One of three columns </div> </div> </div> ~~~  ## **水平對齊** ``` .justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } ``` ## **偏移列** `.offset-md-*``*``.offset-md-4``.col-md-4` ~~~html <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div> </div> ~~~  ~~~html <div class="container"> <div class="row justify-content-start"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-center"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-end"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-around"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-between"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> </div> ~~~  下面需要完整的bootstrap.css 或者直接加上如下代碼 ``` @each $prop, $abbrev in (width: w, height: h) { @each $size, $length in $sizes { .#{$abbrev}-#{$size} { #{$prop}: $length !important; } } } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } // Viewport additional helpers .min-vw-100 { min-width: 100vw !important; } .min-vh-100 { min-height: 100vh !important; } .vw-100 { width: 100vw !important; } .vh-100 { height: 100vh !important; } ``` # **相對于父元素的尺寸** 字母代表：w(with)、 h(height)、p(padding) b(border) mw-100:max-width: 100%; mh-100:max-height: 100%; 數字代表相對于父元素的百分比 .pr-lg-5,.px-lg-5:padding-right .pt-3,.py-3:padding-bottom .pb-3,.py-3:padding-top # 相對于視口（viewport）的尺寸 你還可以使用工具類來設置相對于視口（viewport）的寬度和高度。 ~~~html <div class="min-vw-100">Min-width 100vw</div>//min-width: 100vw!important; <div class="min-vh-100">Min-height 100vh</div>//min-heigth: 100vh!important; <div class="vw-100">Width 100vw</div>//width: 100vw!important; <div class="vh-100">Height 100vh</div>//heigth: 100vh!important; .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } ~~~