簡介

在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）