bootstrap中外层div盒子的class设置为"container"和设置为"container-fluid"的区别

直接正文

一句话概括：在bootstrap中，规定了每一行都被分为了固定的12个栅栏，每一个栅栏都有自己的宽度。如果你的div用了container的样式，那么它的宽度最大也大不过12个栅栏总共的最大宽度。而，当你的div用了container-fluid的样式，它会无视12个栅栏的规定，根据屏幕自动适应自动填充。(当然，宽度要设置为width:100%)，下面用例子说明。

---

当<div class="container-fluid">的时候如下图所示，

图片部分对应的代码：
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-lg-12" style="height: 800px;">
            <img style="width:100%; height:100%" src="./WM-new/images/PC_01.png">
        </div>
    </div>
</div>

---

当<div class="container">的时候如下图所示，

图片部分对应的代码：
<div class="container">
    <div class="row">
        <div class="col-lg-12" style="height: 800px;">
            <img style="width:100%; height:100%" src="./WM-new/images/PC_01.png">
        </div>
    </div>
</div>

---

对比两张图看，是不是很清晰明了了呢？
本文原创。
图片、代码来源于作者自己做的实际项目。结论属个人理解不一定正确，希望能对读者有所启发。