Bootstrap 4 和 5 中的 Bootstrap 間距實用程式類別有何變化？

如何在 Bootstrap 中使用間距實用程式類別？

在一篇文章中，您遇到了 Bootstrap 4 間距實用程式類，例如 m-b- lg，您嘗試在 React MeteorJS 應用程式中實現它，但沒有成功。為了澄清這一點，讓我們來探索 Bootstrap 間距實用程式的用法和更新。

Bootstrap 5（beta 2021）

自從Bootstrap 5 引入了RTL 支援後，左和右概念已替換為開始和結束，導致l- 和r- 間距實用程式變更：

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

引導程式Bootstrap 4（2020 更新）

引導程式Bootstrap 4（2020 更新）

Bootstrap 4 的間距實用程式自alpha 版本以來不斷發展。更新後的語法為：
邊距：
• m{sides}-{size}
填充：

p{sides} -{大小}

例如：
• mb-2 = 邊距底部2 個間距單位
• m-0 = 無邊距
• pt-3 = 填滿頂部3 個間距單位

p-1 = 填滿所有側面1 個間距單位

Bootstrap 4 提供了6 種尺寸（0-5 ），代表了一部分預設0.5rem 間隔單元。此外，您現在可以指定x 軸（左/右）和y 軸（上/下）實用程式：
• my-2 = 邊距頂部和底部2 個間距單位
• mx-0 = 左右無邊距

px-3 = 左右填充3 個間距單位

此外，這些間距實用程式是響應式的，具有最小的斷點(xs ) 若未指定斷點，則隱含：
• mt-md-2 = 邊距頂部2 個間距單位，在md（以上）

py- sm-0 = 無填充頂部& 底部，sm（以上）

以上是Bootstrap 4 和 5 中的 Bootstrap 間距實用程式類別有何變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！