CSS Bootstrap – 选择框和按钮并列

在本文中，我们将介绍如何使用CSS和Bootstrap将选择框和按钮并列显示在同一行。这在Web开发中很常见，因为我们经常需要在选择框旁边放置一个按钮来执行相应的操作。

在进行下面的示例之前，请确保您已经引入了Bootstrap库，并且添加了适当的CSS样式。

阅读更多：CSS 教程

使用Bootstrap的网格系统

Bootstrap提供了一个方便的网格系统，可以轻松地将网页内容分成12个列。我们可以利用这个网格系统将选择框和按钮放置在同一行。下面是一个简单的示例：

<div class="container">
  <div class="row">
    <div class="col-6">
      <select class="form-control">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
      </select>
    </div>
    <div class="col-6">
      <button class="btn btn-primary">按钮</button>
    </div>
  </div>
</div>

在上面的示例中，我们在一个<div>容器内创建了一个<div>行，并在行内分别创建了一个占据6个列的<div>，用来容纳选择框和按钮。通过将选择框和按钮放置在不同的列中，它们就可以并列显示在同一行。

自定义样式实现

除了使用Bootstrap的网格系统外，我们还可以使用自定义的CSS样式来实现选择框和按钮的并列显示。下面是一个示例：

<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }

  .select-box {
    width: 50%;
    margin-right: 20px;
  }

  .select-box select {
    width: 100%;
  }

  .button-box {
    width: 50%;
  }

  .button-box button {
    width: 100%;
  }
</style>

<div class="container">
  <div class="select-box">
    <select class="form-control">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>
  <div class="button-box">
    <button class="btn btn-primary">按钮</button>
  </div>
</div>

在上面的示例中，我们使用了CSS的display: flex属性来将选择框和按钮放置在容器内，同时使用align-items: center和justify-content: center来使它们在容器水平居中对齐。通过为选择框和按钮设置适当的宽度，我们可以让它们并列显示在同一行。