[Bootstrap] (6)Spacing

Bootstrap也有快速增加padding、marging的class。

註：padding、marging是CSS的基本觀念，不懂請先看此篇。

說明

對於 xs，使用固定格式 {property}{sides}-{size} 命名這些 Class。

對於 sm、 md、lg 和 xl，使用格式 {property}{sides}-{breakpoint}-{size}。

 {property}屬性 設定:

• m – 這個 class 會設定 margin
• p – 這個 class 會設定 padding

{sides}邊緣 設定:

• t – 這個 class 會設定 margin-top 或 padding-top
• b – 這個 class 會設定 margin-bottom 或 padding-bottom
• l – 這個 class 會設定 margin-left 或 padding-left
• r – 這個 class 會設定 margin-right 或 padding-right
• x – 這個 class 會設定 *-left 和 *-right
• y – 這個 class 會設定 *-top 和 *-bottom
• 空白 – 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣

{size}尺寸 設定:

• 0 – 這個 class 會設定 margin 或 padding 的樣式值為 0
• 1 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
• 2 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
• 3 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
• 4 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
• 5 – (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
• auto – 這個 class 會設定 margin 為 auto

（你也可以對 $spacers Sass map 調整變數。）

範例

上述應該都蠻淺顯的，下面特別說明auto屬性。

假設一個容器有3個box，第1個需要排在最左，第2、3靠右，可以這樣做。

為方便說明，先定義內容style－

    .box {
      background-color: #7952b3;
      color: white;
      border: 1px solid white;
    }

    .h100px {
      height: 100px;
    }

程式碼

<div class="row justify-content-end">
  <div class="col-3">
    <div class="box h100px">A</div>
  </div>
  <div class="col-3 ml-auto">
    <div class="box h100px">B</div>
  </div>
  <div class="col-3">
    <div class="box h100px">C</div>
  </div>
</div>

結果

.justify-content-end排版對齊於主軸（水平線），起點在右邊。

第2個.box的ml-auto在自身兩側增加margin，將臨邊的.box推到最底部。

參考資料

六角學院課程：https://www.udemy.com/getbootstrap-4/

官方網站：https://getbootstrap.com/

中文網（六角學院翻譯）：https://bootstrap.hexschool.com/