如何将两个引导卡彼此相邻放置？

引导卡（Bootstrap Card）是一种常用的UI组件，它为我们展示和组织信息提供了很好的支持。在一些情况下，我们需要将两个引导卡放置在一起，以共同表达一些相关的信息。在本文中，我们将介绍如何将两个引导卡相邻放置。

方法一：使用 Bootstrap 栅格系统

Bootstrap 栅格系统可以帮助我们将内容进行划分，在不同的设备上呈现不同的布局。我们可以利用栅格系统，将两个引导卡放置在同一行，从而达到相邻放置的效果。

示例代码如下：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="card">
        <!-- 引导卡内容 -->
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <!-- 引导卡内容 -->
      </div>
    </div>
  </div>
</div>

这段代码创建了一个容器（container），在其中创建了一行（row），并使用 col-sm-6 将两个引导卡放置在同一行内。在大屏幕设备上，两个引导卡将等分一行；在小屏幕设备上，它们将依次排列。

方法二：使用 Bootstrap Flexbox 布局

Bootstrap 4 引入了 Flexbox 布局，它可以帮助我们更轻松地实现布局。我们可以利用 Flexbox，将两个引导卡放置在同一容器内，从而达到相邻放置的效果。

示例代码如下：

<div class="d-flex justify-content-between">
  <div class="card mr-3">
    <!-- 引导卡内容 -->
  </div>
  <div class="card">
    <!-- 引导卡内容 -->
  </div>
</div>

这段代码给容器添加了 d-flex 和 justify-content-between 类，它们帮助我们实现了 Flexbox 布局，并将两个引导卡放置在容器的两侧。我们还使用了 mr-3 类将第一个引导卡与第二个引导卡隔开一些距离，使它们更好看些。

总结

以上是将两个引导卡彼此相邻放置的两个方法：使用 Bootstrap 栅格系统和使用 Bootstrap Flexbox 布局。你可以根据实际需求选择其中的一种。同时，我们还建议你查看 Bootstrap 官方文档，深入了解栅格系统和 Flexbox 布局的使用技巧。