如何使用 Bootstrap 間距實用程式類別來控制佈局中的邊距和填充？

了解 Bootstrap 間距實用程式類別

Bootstrap 提供全面的間距實用程式類別來控制元素的邊距和填充。這些類別簡化了佈局中調整空白的過程。

語法

間距實用程式類別的語法在不同的 Bootstrap 版本中不斷發展。

Bootstrap 4

邊距： m{sides}-{size}
填充： p{ sides}-{size}

Bootstrap 5

邊距： m{sides}-{size}（使用me- m{sides}-{size}（使用me-

、ms-、pe -, ps-

)

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

填充: p{sides}-{size}

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

範例

引導程式4：

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

引導程式5：

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      <div classname="m-b-lg">
        {/* Your content */}
      </div>
    );
  }
}

export default Example;</code>

響應式間距

引導程式4 實現響應斷點的響應式間距實用程式類別。語法為：

範例：React 中的用法使用實用程式在React 中，您可以在元素上設定className 屬性。例如：注意：在 Bootstrap 4 中，您可能需要安裝一個外掛程式來啟用對間距實用程式類別的支援。請參閱 Bootstrap 文件以獲取更多資訊。

以上是如何使用 Bootstrap 間距實用程式類別來控制佈局中的邊距和填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！