具有相同大小的“col”的引导网格答案

【问题标题】：bootstrap grid with equally sized "col"具有相同大小的“col”的引导网格
【发布时间】：2016-09-30 06:48:07
【问题描述】：

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

<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>

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

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

【问题讨论】：

标签： html css grid col

【解决方案1】：

通过将 min-height 添加到边框类将解决您的问题。

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

【讨论】：

这适用于某些情况。但是当一个部分与其他部分相比变得非常大时呢？这可以在某些情况下工作，但是当放入更多内容时，是否有什么东西可以让它对大小做出响应？
如果文本超出边框，您可以自动滚动...它将添加一个滚动条

【解决方案2】：

.row-eq-height {
	display: flex;
}

<div class="row row-eq-height">
        <div class="col-xs-4">.row.row-eq-height &gt; .col-xs-4</div>
        <div class="col-xs-4">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
        <div class="col-xs-4">.row.row-eq-height &gt; .col-xs-4</div>
      </div>

【讨论】：