Bootstrap 4 中的「mb-0」實用程式類別如何影響頁面元素？

了解Bootstrap 4 中class="mb-0" 實用程式類別的用途

Bootstrap 4 為開發人員提供了大量的margin和padding 實用程式類別旨在增強頁面回應能力和跨不同斷點的適應性，包括xs、sm、md、lg 和xl。這些多功能類別遵循一致的命名約定：

{property}{sides}-{size}

解密類別的元素

• m:表示邊距settings>
• m:表示邊距settings
• b: 指定下邊距

0:

將margin-bottom 值設定為0

實作範例

<code class="html"><p class="mb-0">Lorem ipsum</p></code>

考慮以下HTML 程式碼：

在此實例中，「mb-0」公用程式類別已套用於段落元素，從而產生刪除該特定元素的預設下邊距。

其他實用程式類別選項

• Bootstrap 4 也為其他邊距和填充屬性提供實用程式類別：
• t: 頂部邊距/內邊距
• l:左邊距/內邊距
• r: 右邊距/內邊距
• r: 右邊距/內邊距

x:

左邊距/內邊距和-右

y:

上邊距/內邊距和-bottom

y:

上邊距/內邊距和-bottom
大小選項：
• 實用程式類別可以使用大小選項進一步自訂，使開發人員能夠精確控制間距：
• 0:
無邊距/填充
• 1:
0.25rem 的邊距/填充（預設字體大小為4 像素）
• 2:
0.5rem (8px) 的邊距/內邊距
• 3:
1rem (16px) 的邊距/內邊距
4:

1.5rem (24px) 的邊距/內邊距

5: 3rem (48px) 的邊距/內邊距auto: 設定margin to auto有關更全面的詳細信息，請參閱有關間距的官方Bootstrap 4 文檔和w3schools 教程。

以上是Bootstrap 4 中的「mb-0」實用程式類別如何影響頁面元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！