# 網格系統 應用

## 一、使用網格的注意事項

* 網格系統以 flexbox（CSS3）為基礎，可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
* 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
* 網格系統必須在容器（.container）中才有作用

## 二、指定欄寬用法

* 使用範例：

  ```markup
  <div class="container">
    <div class="row">
        <div class="col-sm-5">左邊五欄</div>
        <div class="col-sm-7">右邊七欄</div>
    </div>
  </div>
  ```
* .row 代表一個橫列，確保裡面的欄位對齊、排序。
* .col-sm 是斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄
* 若超過12欄，自動新增一個 .row

## 三、自動等寬用法

* 使用等寬欄位

  ```markup
  <div class="container">
    <div class="row">
        <div class="col">col 等寬 1/5</div>
        <div class="col">col 等寬 2/5</div>
        <div class="col">col 等寬 3/5</div>
        <div class="col">col 等寬 4/5</div>
        <div class="col">col 等寬 5/5</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm 等寬 1/5</div>
        <div class="col-sm">col-sm 等寬 2/5</div>
        <div class="col-sm">col-sm 等寬 3/5</div>
        <div class="col-sm">col-sm 等寬 4/5</div>
        <div class="col-sm">col-sm 等寬 5/5</div>
    </div>
  </div>
  ```
* 上方是不管螢幕多大，都分成五欄
* 下方是當螢幕在 576 以上時，才分五欄，576 以下的時候，自動調成單欄式。

## 四、指定欄寬+自動欄寬

* 可以指定某幾欄的欄寬，其餘的自行自動平均

  ```markup
  <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-7">指定佔 7 欄</div>
        <div class="col-sm">自動平均分配</div>
    </div>
  </div>
  ```

## 五、根據內容多寡自動調整欄寬

* 不確定該站多少欄寬，讓電腦自行根據內容多寡來判斷：

  ```markup
  <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-auto">根據中間內容多多寡來判斷欄寬</div>
        <div class="col-sm">自動平均分配</div>
    </div>
  </div>
  ```

## 六、不同斷點的欄寬搭配

* 在同一個欄位根據不同斷點給予不同大小

  ```markup
  <div class="container">
    <div class="row">
        <div class="col">自動平均分配</div>
        <div class="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div>
        <div class="col">自動平均分配</div>
    </div>
  </div>
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnprogramming.gitbook.io/programlearned/bootstrap/grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.