首頁 > web前端 > css教學 > 如何在 Bootstrap 4 中偏移列?

如何在 Bootstrap 4 中偏移列?

Barbara Streisand
發布: 2024-11-07 10:34:03
原創
409 人瀏覽過

How to Offset Columns in Bootstrap 4?

Bootstrap 4 欄位偏移技術

Bootstrap 4 引入了更新的列偏移技術。先前使用「offset-md-*」類別的方法已在 Beta 1 中刪除。

引入 .ml-auto 和 .mr-auto

新的方法利用「.ml-auto」和「.mr-auto」類。這些類別會自動調整邊距以將列推向行內的左側或右側。

使用虛擬列的自訂偏移

要實現自訂列偏移,需要使用「虛擬」可以使用列佔位符。例如,要將「col-md-4」列偏移2 個單位,請使用:

<div>
登入後複製
登入後複製
登入後複製

使用.ml-auto 和.mr-auto 將列居中

要將兩個相鄰的「col-md-4」列居中,請將「.ml-auto」應用於左列,將「.mr-auto」應用於右列:

<div>
登入後複製
登入後複製
登入後複製

使用.mx-auto 進行居中放置

要將「col-md-4」列居中,請套用「.mx-auto」:

<div>
登入後複製
登入後複製
登入後複製

注意:特定列偏移量將在Bootstrap 4 Beta 2 中恢復。

以上是如何在 Bootstrap 4 中偏移列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板