在 Bootstrap 4 中设置水平对齐的手风琴

手风琴是一个常用的界面元素，可以展示多个折叠的选项卡并在用户点击时逐一展开。Bootstrap 4 提供了内置的手风琴组件，可以很容易地实现这个功能。本文将介绍如何在 Bootstrap 4 中设置水平对齐的手风琴。

步骤一：创建手风琴组件

首先，您需要创建一个手风琴组件，以展示您所需的内容。以下是一个简单的例子：

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="heading1">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
          第一个选项卡
        </a>
      </h5>
    </div>

    <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
      <div class="card-body">
        这里是第一个选项卡的内容。
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" role="tab" id="heading2">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          第二个选项卡
        </a>
      </h5>
    </div>

    <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
      <div class="card-body">
        这里是第二个选项卡的内容。
      </div>
    </div>
  </div>

  <!-- Add more cards here -->
</div>

在上述示例中，我们创建了两个选项卡，展示了一些内容。请注意，每个选项卡都有一个“id”属性，用于将选项卡与内容区域关联起来。此外，我们还为每个选项卡设置了“role”和“aria”属性，以提高可访问性。

步骤二：设置水平对齐

一旦您创建了手风琴组件，就可以使用 Bootstrap 4 中内置的类来实现水平对齐。以下是一个例子：

<div class="row">
  <div class="col-md-6">
    <div id="accordion" role="tablist">
      <!-- Add your cards here -->
    </div>
  </div>

  <div class="col-md-6">
    <div id="accordion" role="tablist">
      <!-- Add your cards here -->
    </div>
  </div>
</div>

在上述示例中，我们将手风琴组件放置在两个列中，每个列都占据了屏幕宽度的一半。这将使您能够轻松地水平对齐手风琴组件。您可以根据需要添加更多列。

完成！

以上就是在 Bootstrap 4 中设置水平对齐的手风琴的全部内容。希望这个介绍能够帮助您在自己的项目中实现这个功能。