多端全螢幕適配方案

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

<div class="container">
  <div class="row">
    <!-- 12 等份寬度中的 1/2 -->
    <div class="col">
      1 of 2
    </div>
    <!-- 12 等份寬度中的 1/2 -->
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <!-- 12 等份寬度中的 1/3  -->
    <div class="col">
      1 of 3
    </div>
    <!-- 12 等份寬度中的 1/3 -->
    <div class="col">
      2 of 3
    </div>
    <!-- 12 等份寬度中的 1/3 -->
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <!-- 扣除 6/12 等份寬度，均分剩餘寬度 -->
    <div class="col">
      1 of 3
    </div>
    <!-- 佔 6/12 等份寬度 -->
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <!-- 扣除 6/12 等份寬度，均分剩餘寬度 -->
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <!-- 扣除 5/12 等份寬度，均分剩餘寬度 -->
    <div class="col">
      1 of 3
    </div>
    <!-- 佔 5/12 等份寬度 -->
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <!-- 扣除 5/12 等份寬度，均分剩餘寬度 -->
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

<div class="container">
    <div class="row">
        <!-- 其他尺寸下佔6格，均分12等份的column -->
        <!--
            大設備以上尺寸佔 3 格
            所以一行可以放 4 個 <div class="advantage-item"></div> (3/12 + 3/12 + 3/12 + 3/12 = 1)
        -->
        <!--
            在低於大屏的尺寸寬度，一個 advantage-item 佔 6 格
            所以一行只能放 2 個 <div class="advantage-item"></div> (6/12 + 6/12)
            如果超過二個，第三個就會自動換行並置左貼齊，後面以此類推
        -->
        <div class="col-6 col-lg-3">
            <div class="advantage-item">
                <div class="advantage-icon advt-1"></div>
                <div class="advantage-title">加速度</div>
                <div class="advantage-desc"><p>线上便捷申卡</p><p>审核最快5分钟完成</p></div>
            </div>

        </div>
        <div class="col-6 col-lg-3">
            <div class="advantage-item">...</div>
        </div>
        ...
    </div>
</div>

// Grid breakpoints
$grid-breakpoints: (
  xs: 0, // 低於 576 像素，默認 0
  sm: 576px, // 小設備 - 576 像素以上
  md: 768px, // 中設備 - 768 像素以上
  lg: 992px, // 大設備 - 992 像素以上
  xl: 1200px // 極大設備 - 1200 像素以上
) !default;

// Grid containers
$container-max-widths: (
  sm: 540px, // 小設備時 container 寬度 (左右 margin 各18px，共36px)
  md: 720px, // 中設備時 container 寬度 (左右 margin 各24px，共48px)
  lg: 960px, // 大設備時 container 寬度 (左右 margin 各16px，共32px)
  xl: 1140px // 極大設備時 container 寬度 (左右 margin 各30px，共60px)
) !default;

// Grid columns
$grid-columns:                12 !default;  // 一行最多幾單位的 col
$grid-gutter-width:           30px !default; // 列與列間隔