Bootstrap 中 .container 与 .container-fluid 的区别

二者的区别

.container 是 fixed-with, .container-fluid 是 full-width

看编译之后的 bootstrap 代码，即可一目了然

@media (min-width: 1200px)
.container {
    width: 1170px;
}

@media (min-width: 992px)
.container {
    width: 970px;
}

@media (min-width: 768px)
.container {
    width: 750px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

即，在不同的屏幕宽度下，.container 均有对应的固定尺寸，例如，超过了 1200px 之后，.container 就限制死宽度为 1170px 了。而 .container-fluid 则为 full-width。

什么时候使用 .container (.container-fluid)

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

既然 .container 有了固定宽度，那么理论上 .container 需要置于外层，用于整体布局。例如，二栏式布局的外层。

body
	div - 全屏 Carousel 
	div - .container

从官方的示例来看，的确是这样，.container 置于 body 的下一层即可。然后将 grid 的相关类置于 .container 中即可。

如果 col 中还要再嵌套 row col, 不需要再引入一个 .container, 毕竟 .container 的宽度是固定的。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式