html - 具有相同高度的 Bootstrap 单元格

Question

我有以下内容

<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Text that<br>literally<br>spans<br>4 lines
      </p>
    </div>
  </div>
</div>

和CSS

.box-cell
{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}

所以我面临的问题是其中一个单元格通常比另一个高。我有什么办法可以使每个单元格占据多少高度？搜索没有让我知道我可以操纵哪个属性来获得相同的高度:(

Here is jsfiddle然而在这个 fiddle 中我不能让他们并排来证明我的观点

编辑:我想我没有正确指定它。我想让边框和最高的单元格一样高。因此，此处提供的所有示例实际上都去掉了边框，而是为背景着色。如果我这样做，那么是的，它会让人产生每个单元格都相同的错觉，但我希望有一个相同高度的边框。

Answer 1

我试过了 replicating what it sounds like you are looking for.

我建议您使用 flexbox，因为它似乎完全符合您的要求。

<div class="myc">
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
  </div>

对于 CSS

.myc {
  display: flex;
}

.col {
  background-color: yellow;
  margin-right: 20px;
}