在Bootstrap卡中显示多个水平图像

在Bootstrap中，可以使用卡片（Card）组件来显示多个水平图像。以下是实现的步骤：

步骤1：创建卡片（Card）组件

使用以下代码创建一个卡片组件：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

步骤2：添加图像

在卡片组件中添加img标签来添加图像，如下所示：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <img src="image1.jpg" class="card-img-top">
  </div>
</div>

步骤3：添加多个卡片组件

使用以上步骤添加多个卡片组件即可，如以下代码所示：

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <img src="image1.jpg" class="card-img-top">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <img src="image2.jpg" class="card-img-top">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <img src="image3.jpg" class="card-img-top">
      </div>
    </div>
  </div>
</div>

以上代码中使用一个row来包含多个col-md-4，每个col-md-4包含一个卡片组件。在每个卡片组件中添加不同的图像即可显示多个水平图像。

结论

以上是如何在Bootstrap卡中显示多个水平图像的介绍，通过创建卡片组件并添加图像，再使用row和col-md-4来排列卡片组件实现。