一.網格設為12格

<div class="container" id="demo">
  <div class="row">
    <div class="col-2"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
    <div class="col-6"><span>2</span></div>
  </div>
</div>

#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：

1.這裏一個col，可以佔12格。寫法為col-12，上面的例子為三個col。
2.bootstrap網格系統一個row只能用12格，上面的例子剛好12格

二.網格設為13格

<div class="container" id="demo">
   <div class="row">
    <div class="col-2"><span>1</span></div>
    <div class="col-4"><span>2</span></div>
    <div class="col-7"><span>2</span></div>
  </div>
</div>

重點：

在這裡的例子col-2.col-4.col-7加起來超過12格，超過12格則會將最後一個的col-7往下排。

codepen
參考：bootstrap4