Bootstrap 是一款流行的前端框架，提供了众多常用的 CSS 类来简化页面设计。其中，边距（margin 和 padding）是常见的样式之一，本文将介绍 Bootstrap v4 中的各种边距类及其用法。

## 基础边距

Bootstrap 提供了一系列基础边距类，如.m-*（margin）、.p-*（padding），其中的 * 表示边距值，可以是 0、1、2、3、4 或 5。例如，.m-3 表示设置 margin 为 3 个间距单位（1 个间距单位为 16 像素）。以下是基础边距类的示例：

<div class="m-3">这是一个带有 48px 边距的 div 元素</div>

除了.m-*和.p-*，还有.my-*和.py-*分别表示设置上下边距或内边距。例如，.py-2 表示同时设置 padding-top 和 padding-bottom 为 32px（即 2 个间距单位）。

## 方向边距

除了基础边距外，Bootstrap 还提供了针对每个方向的边距类。例如，.mt-* 和 .mb-* 分别表示 margin-top 和 margin-bottom。这些类可以与基础边距类组合使用，以实现更精细的样式控制。以下是一些示例：

<div class="mt-2 mb-3">这是一个带有 32px 上边距和 48px 下边距的 div 元素</div>

## 左右边距

Bootstrap 提供了.mx-*和.px-*类，分别表示设置左右 margin 或 padding。同样地，它们也可以和其他的边距类组合使用。例如，.px-3 表示设置 padding-left 和 padding-right 为 48px（即 3 个间距单位）。

## 自动边距

最后，Bootstrap 还提供了自动边距类，如.m-auto、.mx-auto，它们可以用于居中对齐元素。例如，以下代码会将一个按钮居中对齐，并在其左右两侧各添加 24px 的 margin：

<button class="btn btn-primary mx-auto">按钮</button>

## 总结

在 Bootstrap 4 中，外边距（margin）的样式类为 m-* 或 mx-*、my-*、mt-*、mb-*、ml-*、mr-* 其中之一，其中 * 代表数字，用于指定外边距的大小。

具体解释如下：

  • m-*：设置四个方向的外边距。例如，m-3 表示将所有方向的外边距设置为大小为 3 的间距。
  • mx-* 和 my-*：分别设置水平和垂直方向的外边距。例如，mx-5 表示将左右两侧的外边距设置为大小为 5 的间距。
  • mt-*、mb-*、ml-* 和 mr-*：分别设置顶部、底部、左侧和右侧的外边距。例如，mt-2 表示将顶部的外边距设置为大小为 2 的间距。

可以通过在相应的样式类中添加数字来调整外边距的大小。注意，数字越大，外边距越宽。

另外，在以上的样式类后面加上 -auto 可以自动设置外边距。例如，mx-auto 可以使元素在水平方向上居中对齐。

以上是 Bootstrap v4 中常见的边距类。通过简单地组合这些类，我们可以轻松地实现各种页面布局效果。在应用时，建议根据需要选择相应的类，以避免过多的样式冗余。

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。