需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid"> ... </div>

.container-flex 类用于 100% 宽度，内元素等宽适应。

<div class="container-flex"> <div class="flex-item">50%宽度</div> <div class="flex-item">50%宽度</div> </div> <div class="container-flex"> <div class="flex-item">25%宽度</div> <div class="flex-item">25%宽度</div> <div class="flex-item">25%宽度</div> <div class="flex-item">25%宽度</div> </div>

9宫格实例

<div class="doc-example" style="width: 300px;"> <div class="container-flex"> <div class="flex-item bg-primary" style="height: 100px;">1</div> <div class="flex-item bg-success" style="height: 100px;">2</div> <div class="flex-item bg-info" style="height: 100px;">3</div> </div> <div class="container-flex"> <div class="flex-item bg-warning" style="height: 100px;">1</div> <div class="flex-item bg-danger" style="height: 100px;">2</div> <div class="flex-item bg-strengthen" style="height: 100px;">3</div> </div> <div class="container-flex"> <div class="flex-item bg-primary" style="height: 100px;">1</div> <div class="flex-item bg-success" style="height: 100px;">2</div> <div class="flex-item bg-info" style="height: 100px;">3</div> </div> </div>