刚刚下载了3.1,在文档中找到了…
通过将最外层的.container更改为.container-fluid,将任何固定宽度的网格布局转换为全宽布局。
在bootstrap.css中查看,.container-fluid似乎与.container相同。两者都具有相同的CSS,并且.container-fluid的每个实例都与.container配对,并且所有列类都以百分比指定。
在摆弄例子的时候,我看不出有什么不同,因为一切似乎都是流动的。
Bootstrap .container和.container-fluid类之间的区别是什么?
更新2019
基本的区别是容器是响应缩放的,而容器流体总是宽度:100%。因此,在根CSS定义中,它们看起来是一样的,但如果你进一步研究,你会发现.container绑定到媒体查询。
引导4
容器有5个宽度…
.container {
width: 100%;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
引导3
容器有4个尺寸。xs屏幕上的全宽度,然后它的宽度根据以下媒体查询而变化。
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
容器vs.容器流体演示
我想你是说容器和容器流体是对网格响应和不响应的区别。这不是真的……也就是说宽度不是固定的…全宽!
这很难解释,所以让我们来看看例子
一个例子
container-fluid:
http://www.bootply.com/119981
所以你可以看到容器如何占据整个屏幕……这是一种容器流体。
现在让我们看看另一个普通的容器,看看预览的边缘
两个例子
容器
http://www.bootply.com/119982
现在你看到例子中的空白了吗?这是因为它是一个固定宽度的容器!在两个不同的选项卡中打开两个示例并来回切换可能更有意义。
EDIT
这里有一个同时包含两个容器的例子。现在你可以真正看出区别了!
http://www.bootply.com/119983
我希望这有助于澄清一点!
.container和.container-fluid都是响应式的(即它们根据屏幕宽度改变布局),但方式不同(我知道,命名听起来不是这样的)。
简短的回答:
.container是跳跃/震荡调整大小,和
.容器流体连续/精细调整宽度:100%。
从功能的角度来看:
.container-fluid会随着窗口/浏览器宽度的变化而不断调整大小,不会像.container那样在两侧留下任何额外的空白空间。(因此得名:“流体”,而不是“数字”、“离散”、“分块”或“量化”)。
.container在几个特定宽度的块上调整大小。换句话说,它将是不同的特定的即“固定”宽度的屏幕宽度的不同范围。
语义:“固定宽度”
您可以看到命名混乱是如何产生的。从技术上讲,我们可以说.container是“固定宽度”,但它是固定的,只是因为它不会在每个颗粒宽度上调整大小。它实际上并不是“固定”的,因为它总是保持在特定的像素宽度上,因为它实际上可以改变大小。
从基本的角度来看:
.container-fluid具有CSS属性width: 100%;,因此它会在每个屏幕宽度粒度上不断重新调整。
.container-fluid {
width: 100%;
}
.container有类似"width = 800px"(或em, rem等)的东西,在不同屏幕宽度上的特定像素宽度值。当然,这就是为什么当屏幕宽度超过屏幕宽度阈值时,元素宽度突然跳转到不同的宽度。这个阈值是由CSS3媒体查询控制的,它允许您针对不同的条件应用不同的样式,比如屏幕宽度范围。
@media screen and (max-width: 400px){
.container {
width: 123px;
}
}
@media screen and (min-width: 401px) and (max-width: 800px){
.container {
width: 456px;
}
}
@media screen and (min-width: 801px){
.container {
width: 789px;
}
}
除了
您可以通过媒体查询使任何固定宽度的元素响应,而不仅仅是.container元素,因为媒体查询正是通过后台引导实现.container的方式(参见JKillian的回答)。