Bootstrap是一个流行的前端开发框架，提供了丰富的CSS和JavaScript组件，用于构建响应式和现代化的Web应用程序。其中，容器（Container）是Bootstrap中的一个重要组件，用于创建响应式布局和页面内容的容器。
容器类型
Bootstrap提供了两种容器类型：固定宽度容器（Fixed-Width Container）和流体容器（Fluid Container）。
固定宽度容器
固定宽度容器是一个具有固定宽度的容器，内容将在页面中水平居中显示，并根据屏幕尺寸进行自适应调整。使用.container类可以创建固定宽度容器。下面是一个示例：
<div class="container">
<!-- 页面内容 -->
</div>在上述示例中，我们使用<div>元素创建了一个固定宽度容器，并添加了.container类。
流体容器
流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。下面是一个示例：
<div class="container-fluid">
<!-- 页面内容 -->
</div>在上述示例中，我们使用<div>元素创建了一个流体容器，并添加了.container-fluid类。
容器嵌套
在Bootstrap中，容器可以进行嵌套，以创建复杂的页面布局。可以在一个容器内部放置另一个容器，并使用不同的容器类型进行组合。下面是一个示例：
代码语言：javascript复制<div class="container">
<h1>主容器</h1>
<div class="container">
<h2>嵌套容器</h2>
<!-- 嵌套容器的内容 -->
</div>
</div>在上述示例中，我们在一个固定宽度容器内创建了一个嵌套的固定宽度容器。可以根据需要进行多层嵌套。
响应式布局
Bootstrap的容器组件还提供了响应式布局的支持，可以根据不同的屏幕尺寸调整容器的布局和样式。
Bootstrap使用CSS的媒体查询（media query）来实现响应式布局。根据屏幕尺寸的不同，可以应用不同的CSS样式。下面是一个示例：
代码语言：javascript复制<div class="container">
<h1>响应式布局</h1>
<div class="row">
<div class="col-sm-6">
<p>左侧内容</p>
</div>
<div class="col-sm-6">
<p>右侧内容</p>
</div>
</div>
</div>在上述示例中，我们创建了一个固定宽度的容器，并在其中添加了一个标题。然后，我们使用<div class="row">创建了一个行（Row），并在行内创建了两个列（Column）。
每个列都使用col-sm-6类，表示在小型屏幕上（如平板电脑）将占据一半的宽度。这意味着在较小的屏幕上，左侧和右侧内容将分别在一行中显示。
通过使用不同的col-类和媒体查询，我们可以根据需要在不同屏幕尺寸下创建不同的布局。
