容器流体与容器

Question

刚下载3.1并在文档中找到...

通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container来.container-fluid.

看bootstrap.css,它似乎.container-fluid是相同的.container.两者都具有相同的CSS,并且每个实例.container-fluid都与之配对.container,并且所有列类都以百分比指定.

当看到示例时,我看不出任何差异,因为一切看起来都很流畅.

由于我是Bootstrap的新手,我认为我错过了一些东西.有人可以花点时间开导我吗？

Answer 1

快速版: .container在bootstrap(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的最小宽度,因此您的.container元素的宽度为970px.然后慢慢扩大浏览器窗口.在.container达到1200px之前,你的宽度不会改变,在此时它会跳到1170px宽,并保持这种方式适用于任何更大的浏览器宽度.

你的.container-fluid元素,而另一方面,将不断调整,你赚你的浏览器的宽度变化最小.

Answer 2

我想你是说containervs container-fluid是响应和不响应网格之间的区别.这不是真的...说的是宽度不固定......它的全宽!

这很难解释,所以让我们看看这些例子

例一

container-fluid:

http://www.bootply.com/119981

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

现在让我们看看另一个正常情况container并观察预览的边缘

例二

container

http://www.bootply.com/119982

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

编辑

更好的是这里有两个容器的例子!现在你可以真正分辨出来!

http://www.bootply.com/119983

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

Answer 3

这两个.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对代码的回答).

Answer 4

使用.container-fluid时,您希望您的网页每相差不大变身在其视口大小.

使用.container时,您希望您的网页变身的只有4种尺寸,这也被称为"断点".

与其大小相对应的断点是:

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

Answer 5

2018年更新

Bootstrap 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;
  }
}

Bootstrap 3

将container-fluid有4种尺寸.width:100%屏幕上的全宽,然后它的宽度根据以下媒体查询而有所不同.

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

容器与容器 - 流体演示

Answer 6

.container具有最大宽度像素值,而.container-fluid最大宽度为100%.

.container-fluid 当您更改窗口/浏览器的宽度时,会不断调整大小.

.container 以几个特定宽度调整大小,由媒体查询控制(从技术上讲,我们可以说它是"固定宽度",因为指定了像素值,但是如果你停在那里,人们可能会觉得它不能改变大小 - 即没有响应.)

Answer 7

从显示的角度来看.container，您可以更好地控制用户看到的内容，并且更容易看到用户将看到的内容，因为您只有 4 种显示变体（在引导程序 5 的情况下为 5），因为大小与与网格大小相同。例如.col-xs，.col-sm，.col，和.col-lg。

这意味着，当您进行用户测试时，如果您在具有 4 种不同尺寸的显示器上进行测试，您会在显示器中看到所有版本。

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