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

在 Bootstrap 中，間距實用程式類別可讓您輕鬆控制元素周圍的間距。但是，如果您在使用它們時遇到問題，這裡有一個指南可以幫助您解決。

更新的間距語法（Bootstrap 4 和 5）

Bootstrap 4引入了間距實用程式類別的簡化語法：

邊距：
m{sides}-{size}

Padding：
p {sides}-{size}

例如：
mb-2 = 底部邊距 2個間距單位
p-1 = 所有邊距1 個間距單位

Bootstrap 5 包括RTL 支持，導致特定方向前綴的更改：

*pl-* = ps-* (start)
*pr-* = pe-* (end)
*ml- * = ms-* (開始)
*mr-* = me-* (結束)

響應式間距

您現在可以將間距應用於特定斷點使用以下語法：

邊距：
m{sides}-{breakpoint}-{size}

填充：
p{sides}-{breakpoint}-{size}

例如：
mt-md-2 = 中等螢幕及以上螢幕上的邊距頂部2 個間距單位

MeteorJS 與React 的範例

如果您在React 中使用MeteorJS，請確保安裝了bootstrap-spacer 軟體包：

meteor npm install bootstrap-spacer

然後，將間距公用程式類別匯入到您的元件中：

import { spacers } from "bootstrap-spacer";

像在標準HTML 中一樣使用實用程式類別：

  ...

故障排除

• 如果間距類別不起作用，請驗證bootstrap-spacer 套件是否已安裝並匯入您的元件中。
• 確保您使用的類別名稱與更新的語法相符。
• 查看相關文件以取得其他資訊和範例。