CSS Bootstrap: 在同一行上对齐两个按钮

在本文中，我们将介绍如何使用CSS和Bootstrap将两个按钮对齐在同一行上。

阅读更多：CSS 教程

1. HTML 结构

首先，让我们创建一个简单的HTML结构来放置我们的按钮。我们可以使用以下代码作为基础结构：

<div class="container">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary">按钮1</button>
    </div>
    <div class="col">
      <button class="btn btn-secondary">按钮2</button>
    </div>
  </div>
</div>

在这个结构中，我们使用了Bootstrap的网格系统。.container类用于创建一个包含页面内容的容器，.row类表示一行，.col类表示列。我们将每个按钮放置在一个单独的列中。

2. 使用行内样式

要将两个按钮对齐在同一行上，我们可以为每个按钮添加行内样式，并使用CSS的display属性将它们设置为inline-block。下面是一个示例代码：

<div class="container">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary" style="display: inline-block;">按钮1</button>
    </div>
    <div class="col">
      <button class="btn btn-secondary" style="display: inline-block;">按钮2</button>
    </div>
  </div>
</div>

在这个示例中，我们将每个按钮的样式设置为display: inline-block;，这将使按钮在同一行上对齐。

3. 使用 CSS 类

除了行内样式，我们还可以使用CSS类来实现按钮的对齐。首先，我们需要为按钮容器创建一个自定义的CSS类，并使用display: flex;属性来将其设置为弹性容器。以下是一个示例代码：

<style>
.button-container {
  display: flex;
}
</style>

<div class="container">
  <div class="row">
    <div class="col button-container">
      <button class="btn btn-primary">按钮1</button>
    </div>
    <div class="col button-container">
      <button class="btn btn-secondary">按钮2</button>
    </div>
  </div>
</div>

在这个示例中，我们创建了一个名为.button-container的CSS类，并将其应用于每个按钮容器的列。通过将容器的display属性设置为flex，我们可以实现按钮在同一行上对齐的效果。

4. 使用 Bootstrap 栅格系统

Bootstrap的栅格系统提供了更简单的方法来对齐按钮。我们可以使用.d-flex和.justify-content-between类将按钮对齐在同一行上。

<div class="container">
  <div class="row">
    <div class="col d-flex justify-content-between">
      <button class="btn btn-primary">按钮1</button>
      <button class="btn btn-secondary">按钮2</button>
    </div>
  </div>
</div>

在这个示例中，我们将按钮容器的列设置为.d-flex类，这将为容器添加display: flex;属性。然后，我们使用.justify-content-between类来将按钮在容器中水平对齐，并在它们之间创建等间距。

5. 使用 CSS 弹性盒子布局

如果你希望自定义按钮的对齐方式，你可以使用CSS的弹性盒子布局。以下是一个示例代码：

<style>
.button-container {
  display: flex;
  justify-content: space-around;
}
</style>

<div class="container">
  <div class="row">
    <div class="col button-container">
      <button class="btn btn-primary">按钮1</button>
      <button class="btn btn-secondary">按钮2</button>
    </div>
  </div>
</div>

在这个示例中，我们使用.button-container类来创建一个包含按钮的容器。通过将容器的display属性设置为flex，我们可以将按钮在同一行上对齐。然后，我们使用justify-content: space-around;属性将按钮在容器中以等间距分布，可以根据需要自定义对齐方式。