如何使用 Bootstrap 间距实用程序类来控制布局中的边距和填充？

了解 Bootstrap 间距实用程序类

Bootstrap 提供全面的间距实用程序类来控制元素的边距和填充。这些类简化了布局中调整空白的过程。

语法

间距实用程序类的语法在不同的 Bootstrap 版本中不断发展。

Bootstrap 4

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

Bootstrap 5

边距： m{sides}-{size}（使用 me-、ms-、pe -, ps-)
填充: p{sides}-{size}

示例

引导程序 4：

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

引导程序 5：

<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}

示例：

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

React 中的用法

使用间距实用程序类在 React 中，您可以在元素上设置 className 属性。例如：

<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>

注意：

在 Bootstrap 4 中，您可能需要安装一个插件来启用对间距实用程序类的支持。请参阅 Bootstrap 文档以获取更多信息。

以上是如何使用 Bootstrap 间距实用程序类来控制布局中的边距和填充？的详细内容。更多信息请关注PHP中文网其他相关文章！