html - 具有相同大小的 "col"的 Bootstrap 网格

Question

我正在尝试为我的网站制作一个类别页面，我需要让所有的列都匹配相同的高度，这样它们就会留在它们需要的位置。否则他们会互相推搡。我可以尝试根据内容使它们的大小完全相同，但这似乎并不容易。

这是 JSFiddle

<div class="col-md-4 col-sm-6 border">
  <div class="content">
    <div class="row">
      <p>Title of Category</p>
      <img id="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Plus_symbol.svg" />
      <br>
      <p>
      This is text that will most likely break this portion of the grid system. Hopefully not!
      </p>
      <br>
      <button type="button" class="btn btn-primary">Learn More</button>
      <br>
    </div>
  </div>
</div>

我正在努力让他们平稳下来。这是我为示例编写的基本版本。我还有另一个问题， Bootstrap 边界仅位于彼此靠近的相邻单元格上。这只显示所有边界。但我只需要每个带边框的元素中的内容具有相同的高度，而不是将彼此推到下一行或聚集在最大的第一个元素一侧的空间中。必须有人拥有与我尝试做的相同的设置。当它最大时，它应该是每行 3 个元素，然后下降到每列 2 个，然后下降到每列 1 个。

如果在 javascript 中有某种解决方案就太好了。我会尝试，但我不是很精通。如果有人在 javascript 或纯 CSS 中有简单的解决方案，请帮忙!这必须以前做过!

Answer 1

通过将最小高度添加到边框类将解决您的问题。

.container .row .border {
  text-align: center;
  border: 1px solid #ddd;
  padding: 20px;
  min-height: 250px;
}