Question

我正在使用Bootstrap 4并尝试使用相同高度的列（默认情况下我认为Bootstrap会这样做）。

这是我的标记：

<div class="row">
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor sit amet
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    </div>
  </div>
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor sit amet, consectetur adipiscing
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
    </div>
  </div>
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </div>
  </div>

</div>

结果如下：

我希望紫色标题与列本身对齐。

这是我正在使用的CSS：

.table-heading {
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    color:white;
    background-color: #7b2265;
    padding:10px;
}

.table-text {
    padding:10px;
    background-color: white !important;
}

这是一支笔：https://codepen.io/anon/pen/ZxeLpO

Answer 1

如果您将h-100作为类添加到以col-md-4作为类的div，那么它将按预期运行。

h-100是bootstrap4实用程序类，用于将高度设置为100％，这将使所有列的高度等于它们所在的行的高度。

<div class="col-md-4 h-100">
    ...
</div>

更新，您可以将height: 100%添加到css类.table-text以填充空白区域。

Answer 2

编辑：

由于您希望两者，标题和正文部分的高度相同，而同时确保它们具有响应性，您可以使用重新排序类与h-100类（高度：100％）组合以达到预期效果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
    .table-heading {
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        color:white;
        background-color: #7b2265;
        padding:10px;
    }
</style>

<div class="container bg-light p-3">
  <div class="row">
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title1 Lorem ipsum dolor sit amet
          </div>
      </div>
      <div class="col-md-4 order-md-1">
          <div class="bg-white h-100 px-3">
              Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          </div>
      </div>
      
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
          </div>
      </div>
      <div class="col-md-4 order-md-2">
          <div class="bg-white h-100 px-3">
              Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. 
          </div>
      </div>
      
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title3 Short Lorem
          </div>
      </div>
      <div class="col-md-4 order-md-3">
          <div class="bg-white h-100 px-3">
              Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          </div>
      </div>
      
  </div>
</div>

order-md-1等类只会在中等（md）或更大的屏幕上启动。在这种情况下，它具有按下看起来像下一行的身体部位列的效果。在较小的屏幕上，不会发生重新排序，因此，在较小的屏幕上，列的显示顺序与HTML中的顺序相同。

引导程序4中的行大小不相同

2 个答案:

编辑：