Bootstrap 行的高度较小，最后一列的高度为空

Question

我正在使用 ruby (html.erb) 渲染一个 html 网站。根据数据库的值，它要么呈现 somevalue，要么如果给定的属性没有值，它只在一行的列内呈现  (Bootsrap)。如果呈现的 html 是 ，则该行的高度较小。在整页上查看下面的代码。在示例 1 中，第一行的第二列有  并且它失去了一半的行高。在示例 2 中，

有一些值，并且该行保持其高度。我想要一个解决方案，无论渲染 html 是  还是 somevalue

，行都保持高度

<!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="h3">
Example 1
</div>

<div class="container">
<div class="row">
  <div class="col-md-2">
    <strong>Row 1</strong> 
  </div>
  <div class="col-md-10">
    <p></p>  
  </div>  
</div>
<div class="row">
  <div class="col-md-2">
    <strong>Row 2</strong> 
  </div>
  <div class="col-md-10">
    <p>41</p>  
  </div>  
</div>
</div>

<div class="h3">
Example 2
</div>


<div class="container">
<div class="row">
  <div class="col-md-2">
    <strong>Row 1</strong> 
  </div>
  <div class="col-md-10">
    <p>42</p>  
  </div>  
</div>
<div class="row">
  <div class="col-md-2">
    <strong>Row 2</strong> 
  </div>
  <div class="col-md-10">
    <p>41</p>  
  </div>  
</div>
</div>

Answer 1

由于的默认margin，高度不相等。如果删除它，在这两种情况下它将具有相同的高度。如果你想要行间距，你可以使用 bootstrap 实用程序 class 像 .mb-2.

为行添加边距

.row p {
  margin-bottom: 0;
}

.row {
  border: 1px solid #ccc;
}

<!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="h3">
  Example 1
</div>

<div class="container">
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 1</strong>
    </div>
    <div class="col-md-10">
      <p></p>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 2</strong>
    </div>
    <div class="col-md-10">
      <p>41</p>
    </div>
  </div>
</div>

<div class="h3">
  Example 2
</div>


<div class="container">
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 1</strong>
    </div>
    <div class="col-md-10">
      <p>42</p>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 2</strong>
    </div>
    <div class="col-md-10">
      <p>41</p>
    </div>
  </div>
</div>

Bootstrap 行的高度较小，最后一列的高度为空 <p></p>

Bootsrap rows has smaller height of last column has an empty <p></p>

html

css

row

bootstrap-4