Bootstrap V4 CSS 样式中的边距大全-砝码网

Bootstrap V4 CSS 样式中的边距大全

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 中常见的边距类。通过简单地组合这些类,我们可以轻松地实现各种页面布局效果。在应用时,建议根据需要选择相应的类,以避免过多的样式冗余。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享