CSS 样式化 Bootstrap 的 btn-group-justified，添加垂直间距和尺寸调整

在本文中，我们将介绍如何使用 CSS 样式化 Bootstrap 的 btn-group-justified，并向其添加垂直间距和尺寸调整。

阅读更多：CSS 教程

什么是 btn-group-justified？

btn-group-justified 是 Bootstrap 中的一个类，用于创建水平排列的按钮组。通过添加该类，按钮将平均分配在父容器中，并充满可用宽度。

以下是一个示例：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">按钮1</a>
  <a href="#" class="btn btn-primary">按钮2</a>
  <a href="#" class="btn btn-primary">按钮3</a>
</div>

上述代码将创建一个包含三个按钮，并将其水平排列在一个按钮组中。

添加垂直间距

在默认情况下，btn-group-justified 不包含垂直间距。如果需要添加垂直间距，可以使用自定义 CSS 样式。

首先，我们需要为每个按钮添加一个自定义类。例如，我们给每个按钮添加 .my-btn 类：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary my-btn">按钮1</a>
  <a href="#" class="btn btn-primary my-btn">按钮2</a>
  <a href="#" class="btn btn-primary my-btn">按钮3</a>
</div>

然后，我们可以使用 margin-bottom 属性为按钮添加垂直间距。以下是一个示例：

.my-btn {
  margin-bottom: 10px;
}

在上述示例中，每个按钮之间将有 10 像素的垂直间距。

调整垂直间距的大小

如果需要调整垂直间距的大小，我们可以通过调整 margin-bottom 的值来实现。以下是一个示例：

.my-btn {
  margin-bottom: 20px;
}

在上述示例中，每个按钮之间的垂直间距将调整为 20 像素。

设置按钮尺寸

除了添加垂直间距之外，我们还可以调整按钮的尺寸。Bootstrap 提供了多个按钮尺寸类，可以通过添加这些类来设置按钮的尺寸。

以下是可用的按钮尺寸类：

.btn-lg：大尺寸按钮
.btn-sm：小尺寸按钮
.btn-xs：超小尺寸按钮

以下是一个示例：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary btn-lg">大尺寸按钮</a>
  <a href="#" class="btn btn-primary">默认尺寸按钮</a>
  <a href="#" class="btn btn-primary btn-xs">超小尺寸按钮</a>
</div>

在上述示例中，我们使用不同的按钮尺寸类来设置按钮的尺寸。