[网格系统 ·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; } ~~~