容器流体与容器

Question

容器流体与容器刚下载3.1并在文档中找到...通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container来.container-fluid。看bootstrap.css，它似乎.container-fluid是相同的.container。两者都具有相同的CSS，并且每个实例.container-fluid都与之配对.container，并且所有列类都以百分比指定。当看到示例时，我看不出任何差异，因为一切看起来都很流畅。由于我是Bootstrap的新手，我认为我错过了一些东西。有人可以花点时间开导我吗？

Answer 1

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