对齐同一行中的两个按钮

在UI设计中，经常需要将同一行中的两个按钮对齐。本文将分别介绍HTML/CSS和Bootstrap框架下对齐同一行中的两个按钮的实现方法，并提供代码片段供参考。

HTML/CSS实现

HTML结构如下：

<div class="button-group">
  <button>按钮1</button>
  <button>按钮2</button>
</div>

CSS样式如下：

.button-group {
  display: flex;
  justify-content: center;
}

上述代码中，我们使用了flex布局，并使用justify-content属性将两个按钮居中对齐。

Bootstrap实现

Bootstrap中提供了d-flex和justify-content-center类，可以实现同样的效果。

HTML结构如下：

<div class="d-flex justify-content-center">
  <button>按钮1</button>
  <button>按钮2</button>
</div>

可以看到，使用Bootstrap可以省去编写CSS样式的步骤。

上述两种方法都可以实现对同一行中的两个按钮进行对齐，程序员可以选择适合自己项目的方法来实现。

代码片段

HTML/CSS实现：

<div class="button-group">
  <button>按钮1</button>
  <button>按钮2</button>
</div>

.button-group {
  display: flex;
  justify-content: center;
}

Bootstrap实现：

<div class="d-flex justify-content-center">
  <button>按钮1</button>
  <button>按钮2</button>
</div>