如何在 Bootstrap 中设置一列控制高度？

在 Bootstrap 中，我们可以使用栅格系统来定义页面的布局。这个栅格系统是基于12列的，我们可以将页面划分成不同的列来达到所需的布局效果。

但是，在一些情况下，我们需要限制列的高度，以达到更好的页面效果。这时，Bootstrap 提供了一些用于控制列高度的类。

使用 .h-25、.h-50、.h-75 和 .h-100 类

Bootstrap 提供了四个类来分别控制列的高度：

• .h-25：将列高度设置为父元素高度的 25%
• .h-50：将列高度设置为父元素高度的 50%
• .h-75：将列高度设置为父元素高度的 75%
• .h-100：将列高度设置为父元素的高度

我们可以将这些类应用于任何列上，以控制其高度。例如：

<div class="container">
  <div class="row">
    <div class="col-md-6 h-50">
      <p>This is a half-height column.</p>
    </div>
    <div class="col-md-6 h-50">
      <p>This is another half-height column.</p>
    </div>
  </div>
</div>

在这个例子中，我们将 .h-50 类应用于两个列上，将它们的高度设置为父元素高度的一半。

自定义高度

如果以上四种高度不能满足需求，我们还可以自定义列的高度。Bootstrap 提供了一个类叫做 .h-auto，它将列的高度设置为自适应内容。

我们可以使用 CSS 来自定义列的高度。例如：

<div class="container">
  <div class="row">
    <div class="col-md-6 custom-height">
      <p>This is a custom-height column.</p>
    </div>
    <div class="col-md-6 custom-height">
      <p>This is another custom-height column.</p>
    </div>
  </div>
</div>

<style>
.custom-height {
  height: 200px;
}
</style>

在这个例子中，我们自定义了一个名叫 .custom-height 的样式类，将其高度设置为 200 像素。然后将这个样式类应用于两个列上。

除了使用自定义样式类之外，我们还可以直接将 style 属性加入到列上，来自定义列的高度。

结论

通过这些技巧，我们可以在 Bootstrap 中轻松地控制列的高度，达到更好的页面效果。无论是应用预定义的高度类，还是自定义高度，都是非常简单易行的。