iT邦幫忙

0

3.Bootstrap(中文教程)網格系统:12 欄的網格系统

一.網格設為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


尚未有邦友留言

立即登入留言