CSS Twitter Bootstrap – 流式栅格布局的等高列

在本文中，我们将介绍如何使用CSS Twitter Bootstrap创建一个流式栅格布局并实现等高的列。

阅读更多：CSS 教程

什么是CSS Twitter Bootstrap？

CSS Twitter Bootstrap是一个开源的前端框架，它提供了一套广泛使用的HTML和CSS样式，以及具有可自适应和响应式设计的组件和工具。它可以帮助开发者快速搭建现代化的网站和应用程序。

流式栅格布局

Twitter Bootstrap的核心组件之一是栅格系统。栅格系统是一个响应式的布局系统，它将网页分为12个等宽的列。开发者可以根据需要将每一行分割成不同数量的列。

流式栅格布局是指栅格布局中的列宽度根据屏幕大小自动调整。这意味着无论是在大屏幕上还是在手机上，都能够呈现出最佳的布局效果。

实现等高列

在某些情况下，我们希望栅格系统中的列可以自动调整为相同的高度，以便呈现一致的外观。虽然Bootstrap没有直接支持等高列的特性，但我们可以使用一些CSS技巧来实现这个效果。

使用Flexbox布局

Flexbox是CSS3的一项新特性，它提供了一种灵活的布局方式，可以轻松地实现等高列。我们只需要在栅格容器上添加一个flex属性，并设置为1，即可使所有列自动调整为相同的高度。

<div class="row d-flex">
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</div>

使用jQuery插件

除了Flexbox布局，我们还可以使用一些jQuery插件来实现等高列的效果。比如，jquery-match-height是一个常用的插件，它可以使多个元素自动调整为相同的高度。

首先，引入jQuery和jquery-match-height插件的脚本文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

然后，在需要等高的列上添加相同的类名，比如equal-height：

<div class="row">
  <div class="col equal-height">
    <!-- content -->
  </div>
  <div class="col equal-height">
    <!-- content -->
  </div>
  <div class="col equal-height">
    <!-- content -->
  </div>
</div>

最后，使用matchHeight()方法来应用插件：

$(document).ready(function() {
  $('.equal-height').matchHeight();
});

通过这个方法，每个具有相同类名的元素将自动调整为相同的高度。

使用伪元素

另一种实现等高列的方法是使用CSS伪元素。我们可以将背景色作为伪元素添加到栅格容器的子元素中，并通过设置高度属性来实现等高效果。

<div class="row">
  <div class="col">
    <div class="column-content">
      <!-- content -->
    </div>
  </div>
  <div class="col">
    <div class="column-content">
      <!-- content -->
    </div>
  </div>
  <div class="col">
    <div class="column-content">
      <!-- content -->
    </div>
  </div>
</div>

.column-content:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.column-content:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.column-content {
  background-color: #f1f1f1;
  padding: 15px;
}

通过给包裹内容的div添加伪元素，并设置高度为100%，再利用垂直对齐属性使内容始终垂直居中，就能够达到等高列的效果。