html - 如何对齐循环打印的 HTML 元素？

Question

我在 col-3 中动态打印一个循环。每列包含 4 个 HTML 元素。

1. 一张图片
2. 标题
3. 一些文字内容
4. 一个按钮

是否可以让每个元素都置顶，无论顶层元素有多少行，都可以相互对齐？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-3">
        <h2 class="pb-4">Title1</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title2</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title3</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
      <div class="col-3">
        <h2 class="pb-4">Title <br> 4</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
      </div>
  </div>
</div>

Answer 1

就我个人而言，我会将内容分成不同的行，并将列放在这些行中:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container pt-5">
  <div class="row">
    <div class="col-12">
      <div class="row" id="titles_row">
        <div class="col-3">
          <h2 class="pb-4">Title1</h2>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title2</h2>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title3</h2>
        </div>
        <div class="col-3">
          <h2 class="pb-4">Title <br> 4</h2>
        </div>
      </div>
      <div class="row" id="texts_row">
        <div class="col-3">
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
        <div class="col-3">
          <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        </div>
      </div>
    </div>
  </div>
</div>