> For the complete documentation index, see [llms.txt](https://learnprogramming.gitbook.io/programlearned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnprogramming.gitbook.io/programlearned/bootstrap/grid/nestfield.md).

# 巢狀欄位

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

* .row 裡面還可以有 .row，子 .row 會以父 .row 的寬度為依據來進行寬度調整
* 使用範例：
* html:

  ```markup
  <div class="container">
  <div class="row">
    <div class="col-sm-8">
      主內容
      <div class="row">
        <div class="col-sm-3">欄</div>
        <div class="col-sm-6">欄</div>
        <div class="col-sm-3">欄</div>
      </div>
    </div>   
    <div class="col-sm-4">
      側邊
      <div class="row">
        <div class="col-sm-3">欄</div>
        <div class="col-sm-6">欄</div>
        <div class="col-sm-3">欄</div>
      </div>
    </div>
  </div>
  </div>
  ```
* css:

  ```css
  div.col-sm-8, div.col-sm-4, div.col-sm-3, div.col-sm-6{
    background-color: #f1ffe7;
    border:1px solid #88a0a8;
    text-align: center;
  }
  ```

![](https://2671156273-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaDZjNzr08eW9hIl-Qq%2F-LaDdqw_bCggxv6Z-pv8%2F-LaDdw6Xh4XgGgeK2XwY%2Frows.png?generation=1552876560912555\&alt=media)