防止 Bootstrap 行占用最高子列元素的高度，并使用较小元素下的空白空间答案

【问题标题】：Prevent Bootstrap row from taking height of tallest child column element, and use the empty space under smaller element防止 Bootstrap 行占用最高子列元素的高度，并使用较小元素下的空白空间
【发布时间】：2022-12-20 06:27:37
【问题描述】：

我正在使用 Bootstrap 5.2。
这个想法是在一行中创建两列，它们都是 col-md-6。此图像是布局外观的一般概念：https://prnt.sc/FaIB3CZMJrO_。

我遇到的问题是我无法创建另一行，其中包含 col-md-6 元素以直接适合 ExampleTitle 列。这是最终发生的事情：https://prnt.sc/YZtp1MJqjQMD。

这就是我想要做的，但在图像中，这样更容易理解：https://prnt.sc/i7w4jVN38uz5。

作为参考，这是我遇到的设计理念（你必须向下滚动一点）：https://css-tricks.com/snippets/css/complete-guide-grid/

.card2 {
  background: #2b2b2b;
  padding: 1rem 1.5rem;
  margin-bottom: 25px;
  border-radius: 16px;
}
body {
  background-color: #131313;
}
h1, h2, h3, h4, h5, h6, a, p {
  color: #fff;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row">
    <div class="col-md-6">
      <h2>ExampleTitle</h2>
      <div class="card2">
        <h4>ExampleItem1</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem2</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem3</h4>
        <p>Description</p>
      </div>
    </div>
    <div class="col-md-6">
      <h2>ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
    </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
    </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
    </div>
    </div>
  <div class="col-md-6">
      <h2>ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
    </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
    </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
    </div>
    </div></div>
</div>

【问题讨论】：

添加你所拥有的代码
我在原始帖子中添加了 HTML 和 CSS，但它不会显示两列，因为它呈现的内容不够大，无法显示两列。
不用担心，当点击Full page时，它会显示在两列中。

标签： html css bootstrap-5

【解决方案1】：

它不会在该结构中工作。你可以让它在一些负边距下工作，但如果卡片的内容动态变化，你将需要用 javascript 来计算它。您是否有特殊原因不将第三列的内容移至第一列？如果需要，您可以在第三列的第一个子元素上放置一些上边距，使其看起来分开。就像是：

.card2 {
  background: #2b2b2b;
  padding: 1rem 1.5rem;
  margin-bottom: 25px;
  border-radius: 16px;
}

body {
  background-color: #131313;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
  color: #fff;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-md-6">
      <h2>ExampleTitle</h2>
      <div class="card2">
        <h4>ExampleItem1</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem2</h4>
        <p>Description</p>
      </div>
      <div class="card2">
        <h4>ExampleItem3</h4>
        <p>Description</p>
      </div>
      <h2 class="mt-5">ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
      </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
      </div>
    </div>
    <div class="col-md-6">
      <h2>ExampleTitle2</h2>
      <div class="card2">
        <h4>Service1</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service2</h4>
        <p>Something that is a longer sentence and will occupy a new line so that they arent the exact same heights</p>
      </div>
      <div class="card2">
        <h4>Service3</h4>
        <p>Something</p>
      </div>
      <div class="card2">
        <h4>Service4</h4>
        <p>Something</p>
      </div>
    </div>
  </div>
</div>

【讨论】：