bootstrap中的row和column

bootstrap的Grid system 網格系統使用一系列的container、row、col來佈局，使用flex排版，並且符合響應式RWD。

<div class="container">
  <div class="row">
    <div class="col-sm">
      ...
    </div>
  </div>
</div>

以上為層級使用方法，container>row>col>內容物元素。如此flex排版才會正確顯示。

1. container 容器用來固定寬度，滿版寬度則使用 .container-fluid。內含預設的padding-left和padding-right (15px)。(如下圖粉紅底處)
2. row 行是水平的群組，使欄正確的排在一行。row的margin-left和margin-right 預設為負值(-15px)，主要是為了空間的補回，使內容物能與左側及右側正確對齊。(如下圖紅色外框)
3. col 欄在bootstrap預設總欄數為12欄，欄寬度 width 以百分比設置，所以它們總是不固定的，並且大小與它們的父元素相關。col內含預設的padding-left和padding-right (15px)，來產生欄和欄之間的gutter。(如下圖灰底處)
4. 在row上加入 .no-gutters 來移除row上的margin以及在col上的padding。
5. 共有五個responsive breakpoint中斷點：極小(省略)、小、中、大、和極大 (extra small, small, medium, large, and extra large)。

如上圖所示，container內含水平padding值，所以假設設定container固定寬度max-width: 960px，而實際內容物(如上圖第二行黑色box)最大寬度為：

960px－container內左右padding值（15px*2）＝930px

container若沒有row及col，則內部元素不會進行flex排版。row的內層一訂要是col，col的外層一定要有row。