简介

在Bootstrap Grid System是由Row和Column来架构页面
class的结构依序: .container/.container-fluid -> .row -> .col

栏间距宽度

基本的 Bootstrap 结构

HTML :

<div class="container">    <div class="row">        <div class="col">            <h2>Lorem ipsum dolor sit amet consectetur.</h2>        </div>    </div></div>

container

从 bootstrap.min.css中可以看到container的css属性:

.container{    width:100%;    padding-right:15px;    padding-left:15px;    margin-right:auto;    margin-left:auto;}@media (min-width:1200px){    .container{max-width:1140px} //当萤幕尺寸 >= 1200px --> width=1140px}

margin-right:auto;,margin-left:auto这两个是让container水平置中。@media (min-width:1200px){max-width:1140px}则是判断当萤幕尺寸大于1200px的时候，将外容器宽度设定为1140px。padding-right:15px;,padding-left:15px;会让container的内容器宽 = 1140px - 15px - 15px = 1110px。

外容器为1140px，但由于左右padding 15px的关係，所以内容器为1140-30=1110px

row

在bootstrap.min.css看到.row的属性。

.row{    display:flex;    flex-wrap:wrap;    margin-right:-15px;    margin-left:-15px;}

里面的内容以display:flex的方式进行排版。flex-wrap:wrap;让超过版面的内容进行换行。原本经由.container作用下让内容器宽度为1110px，margin-right:-15px;、margin-left:-15px;会让容器宽与内容宽变为1140px。

原本在 .container 的作用下内容器宽度是 1110px，但左右margin -15px，会让内容器宽度拉长30px,所以内容器宽度变为 1110px + 15px + 15px = 1140px

col

在bootstrap.min.css看到.col的属性。

.col{    position:relative;    width:100%;    padding-right:15px;    padding-left:15px;    -ms-flex-preferred-size:0;    flex-basis:0;    flex-grow:1;    max-width:100%}

.col 是 .row 的item，在.row 的作用下，.col 的外容器宽再次变成了 1140px。由于.col中的padding-right:15px;,padding-left:15px;会再次将.col的内容器宽变为1110px。

外容器受到.row的影响变为1140px，但由于.col中的左右padding 15px，所以内容器为又变回1140-30=1110px

自订容器

客制化 .container 容器宽度

经过上面的介绍，一般在切版的时候通常是考虑内容器的宽度而非外容器的宽度，如果再切版的时候需求内容器的宽度是980px，则可以往回推.container的max-width，在需求的内容器宽度左右加上padding设定的15px，所以980px + 30px = 1010px。
这种方法只适用在padding-left 和 padding-right 是 15px的情况，若是修改了间距则无法使用。

因此在HTML的.container后面加客制的class - .custom-width

HTML :

 <div class="container custom-width">      <div class="row">          <div class="col">              <h3>Lorem ipsum dolor sit amet consectetur.</h3>          </div>      </div> </div>

css的部分就覆盖掉原本.container的max-width属性

CSS :

.custom-width{    max-width: 1010px;}

原本的.container外容器的宽度为1140px经过自订的max-width后，外容器的宽度变为1010px，而内容器的宽度变为1010px - 30px = 980px 便可以达到要求。

栏间距（gutters）

若要在.row中使用多个.col的时候，由于.col的左右padding 15px，所以会造成各个.col自动出现间距。

HTML:

<div class="container">        <div class="row">           <div class="col">                <h3>Lorem ipsum dolor sit amet consectetur.</h3>           </div>           <div class="col">               <h3>Lorem ipsum dolor sit amet consectetur.</h3>           </div>           <div class="col">               <h3>Lorem ipsum dolor sit amet consectetur.</h3>          </div>       </div></div>

.no-gutters

在Bootstrap 4中提供了.no-gutters这个class，可以将.col之间的间距去掉。

.no-gutters{    margin-right:0;    margin-left:0;}.no-gutters>.col,.no-gutters>[class*=col-]{    padding-right:0;    padding-left:0;}

若在.row中搭配.no-gutters会把原本.row的margin-left和margin-right的-15px去掉，并且把.col中的padding-left和padding-right都修改为 0，由此操作将每一个.col之间的距离去除。

外容器(.container)宽1140px。内容器(.row)宽1100px。.col之间的间去被去除。

客制化栏间距（Custom Gutters）

由上面可以知道，.col之间的距离是来自.col class之中的padding-left和padding-right，我们可以改写.container class中的css属性以达到客製化栏间距的目的。

HTML :

    <div class="container custom-gutters">        <div class="row">            <div class="col">                <h3>Lorem ipsum dolor sit amet consectetur.</h3>            </div>            <div class="col">                <h3>Lorem ipsum dolor sit amet consectetur.</h3>            </div>            <div class="col">                <h3>Lorem ipsum dolor sit amet consectetur.</h3>            </div>        </div>    </div>

CSS :

.custom-gutters{    padding-left: 10px;    padding-right: 10px;}.row{    margin-left: -10px;    margin-right: -10px;}.col{    padding-left: 10px;    padding-right: 10px;}

透过Computed画面可以看到，藉由修改css中的属性，已经将.col中的间距修改为10px。

参考资料 :
[BS] Bootstrap 4 自订容器和栏间距宽度（Custom Container and Gutters Width）