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

【问题标题】：Bootsrap rows has smaller height of last column has an empty Bootstrap 行的高度较小，最后一列的高度为空 
【发布时间】：2021-03-27 21:03:56
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css bootstrap-4 row

【解决方案1】：

由于 的默认margin，高度不相等。如果您将其移除，则在这两种情况下，它将具有相同的高度。如果您想要行之间的间距，您可以使用引导实用程序类为行添加边距，例如.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>

【讨论】：

我还想问，当第二列的内容为空时，是否有任何解释为什么该行会丢失其底部边距
我不确定我是否理解清楚，但如果你申请了保证金，它应该在那里。如果它真的没有边距，你也可以“检查”开发工具中的元素。这将为您节省大量时间。