【小白提问】bootstrap中container和container-fluid的区别？

Question

图片描述

在container包裹时出现水平滚动条

---

在container-fluid包裹时没有水平滚动条

---

只是导航条的container改了一下就有水平滚动条

---

所以，bootstrap的container和container-fluid的区别在哪，有水平滚动条一定没有自适应是么？

Answer 1

浏览器F12直接查看container和container-fluid的css样式

Answer 2

摘自Bootstrap文档：

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

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

将固定宽度的网格布局变成全宽度的布局，就只要把.container改成.container-fluid，所以这两者的区别也就在此。

Answer 3

一个是流式布局 container的大小默认为1440px（记不清了 ） container-fluid的大校是根据屏幕100%

Answer 4

官方文档写明了区别的