CSS Bootstrap: 如何堆叠不同高度的div

在本文中，我们将介绍如何使用CSS和Bootstrap来堆叠具有不同高度的div。在网页设计中，经常会遇到需要将不同高度的元素垂直堆叠在一起的情况，这时候我们就可以使用CSS和Bootstrap的一些技巧来实现。

阅读更多：CSS 教程

CSS Grid布局

CSS Grid布局是一种灵活且强大的布局方式，它可以帮助我们实现网格状的布局，并能够自如地控制元素的位置和大小。在实现堆叠不同高度的div时，我们可以使用CSS Grid布局来实现。

首先，在容器元素上应用CSS Grid布局：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

其中，grid-template-columns定义了容器中的列的数量和宽度，repeat(auto-fill, minmax(300px, 1fr))表示一行中的列数量可以根据容器的宽度自动调整，每列的最小宽度为300px，最大宽度为容器宽度的1/1。

然后，在每个div上应用以下样式：

.div {
  grid-column: span 1;
}

通过设置grid-column的值为span 1，表示该div会在网格中占据1个列的宽度。这样，不同高度的div就可以自由地堆叠在一起，形成一个整齐的布局。

下面是一个示例，展示了如何使用CSS Grid布局来堆叠不同高度的div：

<div class="container">
  <div class="div" style="height: 200px;"></div>
  <div class="div" style="height: 300px;"></div>
  <div class="div" style="height: 400px;"></div>
  <div class="div" style="height: 250px;"></div>
  <div class="div" style="height: 350px;"></div>
</div>

通过设置不同高度的div，我们可以看到它们能够自动堆叠在一起，形成一个整齐的布局。

Bootstrap网格系统

除了使用CSS Grid布局，我们还可以使用Bootstrap的网格系统来实现堆叠不同高度的div。Bootstrap是一个流行的HTML、CSS和JavaScript框架，它提供了很多实用的组件和工具，其中的网格系统可以帮助我们轻松地实现响应式布局。

在使用Bootstrap的网格系统时，我们需要将div放置在row和col的组合中。row用于创建行，col用于创建列。通过将不同高度的div放置在row中，并使用col来指定每个div的宽度，我们就可以实现堆叠不同高度的div。

下面是一个示例，展示了如何使用Bootstrap的网格系统来堆叠不同高度的div：

<div class="container">
  <div class="row">
    <div class="col-md-4" style="height: 200px;"></div>
  </div>
  <div class="row">
    <div class="col-md-4" style="height: 300px;"></div>
  </div>
  <div class="row">
    <div class="col-md-4" style="height: 400px;"></div>
  </div>
  <div class="row">
    <div class="col-md-4" style="height: 250px;"></div>
  </div>
  <div class="row">
    <div class="col-md-4" style="height: 350px;"></div>
  </div>
</div>

通过设置不同高度的div，并将它们放置在不同的row中，我们可以看到它们能够自动堆叠在一起，形成一个整齐的布局。