# 5/24 每日任務

[codepen](https://codepen.io/wengweiling/pen/OJpbGrr)

### 第一題

<H2>第一題</H2>
<div class="container  fs-2">
  <div class="row">
    <div class="col-4 bg-info border border-dark">col-4</div>
    <div class="col-8 bg-info border border-dark">col-8</div>
  </div>
</div>

> 知識點
> row 自帶了`display: flex;` 預設 flex-direction 是 row 所以會將裡面的子元素由左至右橫向排列

### 第二題

<H2>第二題</H2>
<div class="container  fs-2">
  <div class="row justify-content-center mb-4">
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2 bg-info border border-dark">col</div>
  </div>
</div>

> 知識點
1. col( 自動響應全尺寸，row 裡面有幾個 col，每個 col 佔位是 1/col 總數，12個以內，因為 col 預設是 12 個)
2. col-sm( 如果瀏覽器尺寸大於或等於寬度 576px)
4. col-md( 如果瀏覽器尺寸大於或等於寬度 768px)
5. col-lg( 如果瀏覽器尺寸大於或等於寬度 992px)

### 第三題

<H2>第三題</H2>
<div class="container  fs-2">
  <div class="row justify-content-center mb-4">
    <div class="col-4 bg-warning rounded-start border border-dark">col-4
    </div>
    <div class="col-8 bg-primary rounded-end border border-dark">col-8
      <div class="row">
        <div class="col-10 bg-success border border-dark">col-10
        </div>
        <div class="col-2 bg-success border border-dark">col-2
        </div>
      </div>
    </div>
  </div>
</div>

> 知識點
> col 是 ```<div></div>``` 容器作用，所以裡面還是可以在包 row > col 的容器，層數基本上是沒有限制。