CSS Twitter Bootstrap: container中高度为100%的div

在本文中，我们将介绍如何在CSS Twitter Bootstrap中创建一个位于container中并具有100%高度的div。

阅读更多：CSS 教程

container和container-fluid

在CSS Twitter Bootstrap中，container是一个用于包装网站主要内容的容器。它有固定的宽度，并在不同屏幕尺寸下具有不同的响应式行为。

另一方面，container-fluid是一个占据整个视窗宽度的容器，它在不同屏幕尺寸下具有相应的自适应能力。

为了在container中创建一个具有100%高度的div，我们可以使用嵌套的行和列结构，或者使用一些自定义的CSS样式。接下来，我们将详细介绍这两种方法的使用。

使用嵌套的行和列

Bootstrap中的网格系统由行（row）和列（column）组成。我们可以利用这种网格系统来实现container中高度为100%的div。

首先，在container中创建一个行（row）：

<div class="container">
  <div class="row">
    <div class="col">
      <!-- 这里是你的内容 -->
    </div>
  </div>
</div>

接下来，我们可以为列（column）添加一些自定义的CSS样式，使其具有100%的高度：

.col {
  height: 100%;
}

通过以上的HTML和CSS代码，我们创建了一个位于container中的div，并设置了其高度为100%。你可以根据实际需要在div中添加你自己的内容。

使用自定义的CSS样式

除了使用行和列结构，我们还可以使用自定义的CSS样式来实现container中高度为100%的div。

首先，我们需要为container添加一些自定义的CSS样式，并将其高度设置为100%：

<div class="container custom-container">
  <!-- 这里是你的内容 -->
</div>

接下来，在CSS中定义custom-container类的样式：

.custom-container {
  height: 100%;
}

通过以上的HTML和CSS代码，我们创建了一个具有自定义样式的container，并将其高度设置为100%。你可以在这个div中添加你自己的内容。

示例

让我们来看一个具体的示例，展示如何在container中创建一个高度为100%的div。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <style>
    .custom-container {
      height: 100%;
      background-color: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .custom-content {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container custom-container">
    <div class="custom-content">
      <h1>Welcome to My Website</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut risus quis ex bibendum scelerisque. Vestibulum elementum tellus purus, a luctus erat pretium at. Duis tristique nunc risus, vitae auctor ante cursus et.</p>
    </div>
  </div>
</body>
</html>

在这个示例中，我们使用了自定义的CSS样式来创建一个具有100%高度的div。我们在样式中定义了一个custom-container类，将其高度设置为100%，并且指定了一些额外的样式，如背景颜色、对齐方式等。我们还在custom-container内部创建了一个custom-content类，用于放置文本内容。