Bootstrap .container和.container-fluid类之间的区别是什么?

刚刚下载了3.1，在文档中找到了…

通过将最外层的.container改为.container-fluid，将任何固定宽度的网格布局转变为全宽布局。

在bootstrap.css中，.container-fluid似乎与.container相同。两者具有相同的CSS，并且.container-fluid的每个实例都与.container配对，并且所有列类都以百分比指定。

在摆弄例子的时候，我看不出有什么不同，因为一切似乎都是流动的。

因为我是新手Bootstrap，我想我错过了一些东西。谁能花点时间给我开导一下?

496898 次浏览
小开

我想你是在说container vs container-fluid是对网格响应和不响应的区别。这不是真的……也就是说宽度不是固定的…全宽!

这很难解释，所以让我们来看看例子

一个例子

# EYZ0:

http://www.bootply.com/119981

所以你可以看到容器如何占据整个屏幕……这是container-fluid。

现在让我们看看另一个普通的container，并观察预览的边缘

两个例子

# EYZ0

http://www.bootply.com/119982

现在你看到例子中的空白了吗?这是因为它的宽度是固定的container !在两个不同的选项卡中打开两个示例并来回切换可能更有意义。

编辑

这里有一个同时包含两个容器的例子。现在你可以真正看出区别了!

http://www.bootply.com/119983

我希望这有助于澄清一点!

小开

快速的版本: .container有一个固定宽度为每个屏幕大小在引导(xs,sm,md,lg);.container-fluid展开以填充可用宽度。

container和container-fluid之间的区别来自这些CSS行:

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

container类根据正在浏览网页的视口的宽度，给它的div一个特定的固定宽度。这些行不以任何形式存在于container-fluid中，因此它的宽度随着视口宽度的改变而改变。

例如，假设您的浏览器窗口宽度为1000px。由于它大于992px的min-width， .container元素的宽度将为970px。然后慢慢地扩大浏览器窗口。你的.container宽度不会改变，直到你达到1200px，它会跳到1170px宽，并保持这种方式，任何更大的浏览器宽度。

另一方面，当您对浏览器宽度进行最小的更改时，.container-fluid元素将不断调整大小。

小开

.container和.container-fluid都是响应式的(即它们根据屏幕宽度改变布局)，但以不同的方式(我知道，命名听起来不是这样的)。

简短的回答:

.container是跳跃/震荡调整大小，和

.container-fluid是连续/精细调整宽度: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的代码回答)。

小开

你在3.1中是正确的。container-fluid和。container是一样的，工作起来就像container，但如果你删除它们，它就像。container-fluid(全宽度)一样工作。他们在“移动优先方法”中删除了.container-fluid，但现在在3.3.4中又回来了(他们的工作方式不同了)

要获得最新的引导，请阅读这篇关于stackoverflow的文章，它将帮助check it out。

小开

.container有一个最大宽度像素值，而.container-fluid是max-width 100%。

.container-fluid不断调整大小，因为你改变你的窗口/浏览器的宽度任意量。

.container在几个特定宽度的块上调整大小，由媒体查询控制(技术上我们可以说它是“固定宽度” 因为像素值是指定的，但如果你停在那里，人们可能会得到 印象，它不能改变大小-即不响应。)

小开

< em > 2019 < / em >更新

基本的区别是container是响应缩放，而container-fluid总是width:100%。因此，在根CSS定义中，它们看起来是一样的，但如果你进一步观察，你会发现.container绑定到媒体查询。

引导4

container有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

container有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。

当您希望页面转到变形只有4种尺寸(也称为“断点”。)时，请使用.container

它们大小对应的断点为:

  • 超小型:(仅限移动分辨率)
  • 小尺寸:768px(平板)
  • 中号:992px(笔记本电脑)
  • 大:1200px(笔记本电脑/台式机)
小开

从显示的角度来看，.container让您可以更好地控制用户所看到的内容，并且更容易看到用户将看到的内容，因为您只有4个显示变量(在引导5的情况下是5个)，因为大小与网格大小相关。例如.col-xs， .col-sm， .col和.col-lg。

这意味着，当你在做用户测试时如果你在一个有4个不同尺寸的显示器上测试你会看到所有的验证。

当使用.container-fluid时，因为witdh与视口宽度相关，所以显示是动态的，所以变化要大得多，屏幕非常大或屏幕宽度不常见的用户可能会看到您意想不到的结果。


提交答案