Question

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

<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中有一个简单的解决方案，那么请帮忙！这必须在以前完成！

Answer 1

通过向border类添加min-height将解决您的问题。

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: