bootstrap中的container与container-fluid的用法

标签：最大的   媒体查询   改变   div   str   响应式   没有   全屏   作用   

使用过bootstrap的同学都知道，其container与container-fluid都是设置文本居中，但两者还是有很大的区别。

官方给出的解释是：

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

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

 二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。

• container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。

• container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

如果比喻的话，container就如一个嵌套的水池，只有当最里面最小的那个池子注满水后才会溢到下一个更大的池子，而container-fluid则没有隔断，倒入多少水，就充满多少。

还有一点则是使用container时，你会发现在容器外有一个随着浏览器宽度变化而变化的margin，而使用container-fluid则没有这个margin。而这个margin正是container的作用原理。

bootstrap中的container与container-fluid的用法

标签：最大的   媒体查询   改变   div   str   响应式   没有   全屏   作用   

原文地址：https://www.cnblogs.com/sunyubin/p/9678807.html