BootStarp4實做入門

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.