iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 4

Day4--水平置中(4)

使用justify-content-center (Bootstrap結合Flexbox)

  • 容器是Bootstrap中最基本的佈局元素,設置.container容器會自適應寬跟高。
  • 設置.row會讓內層以flex的方式排版,而.col就是.row的flex-item。
  • 生效條件
    1.對.row加入.justify-content-center,就可以讓列元素水平置中。
  • 範例
<div class="container">
    <div class="row justify-content-center border border-success" style="height:100px;">
          <div class="col-4 h-100 border border-primary"></div>
    </div>
</div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20200919/20129568AOiYRU5L24.png

上一篇
Day3--水平置中(3)
下一篇
Day5--水平置中(文字、圖片、...)
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言