:::

6-5 巢狀欄位

  1. .row 裡面還可以有 .row,子 .row 會以父 .row 的寬度為依據來進行寬度調整
  2. 例如:
    <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>

     

  3. 範例:

    See the Pen 巢狀(套嵌) by Tad (@tad0616) on CodePen.


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D943

計數器

今天: 2190219021902190
昨天: 1988198819881988
總計: 7389081738908173890817389081738908173890817389081