一.3個col

<div class="container" id="demo">
  <div class="row">
    <div class="col"><span>1</span></div>
    <div class="col"><span>2</span></div>
    <div class="col"><span>3</span></div>
  </div>
</div>


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

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

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

重點：

row為一欄，col為一列。所以col會在row裡面分三等分

二.6個col

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

重點：

1.如果這裡分六等份，col會在row當中全部佔完六等份。
2.補充：這裡row因為bootstrap4，裡面的display為flex(拿掉的話整個col會佔據一整行)。而col的flex-grow為1(拿掉的話會與float置左的功能一樣往左來排列)

codepen
參考：bootstrap4