首页 文章

容器流体与容器

提问于
浏览 次
458

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

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

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

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

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

twitter-bootstrap twitter-bootstrap-3

8 回答

  • 643

    .container 具有最大宽度像素值，而 .container-fluid 是最大宽度100％ .

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

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

    回复于
  • 0

    Quick version: .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 元素将不断调整大小，因为您对浏览器宽度进行了最小的更改 .

    回复于
  • 165

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

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

    Example one

    container-fluid ：

    http://www.bootply.com/119981

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

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

    Example two

    container

    http://www.bootply.com/119982

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

    EDIT

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

    http://www.bootply.com/119983

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

    回复于
  • 6

    .container 和_824285都是响应式的（即它们根据屏幕宽度改变布局），但是以不同的方式（我知道，命名不会让它听起来那样） .

    Short Answer:

    .container 是调整大小/不稳定，和

    .container-fluid 是宽度连续/精细调整大小：100％ .

    From a functionality perspective:

    .container-fluid 在您更改窗口/浏览器的宽度时会不断调整大小，不会在两侧留下额外的空白空间，这与 .container 的方式不同 . （因此命名："fluid"而不是"digital"，"discrete"，"chunked"或"quantized"） .

    .container 以几个特定宽度调整大小 . 换句话说，它将是不同的特定的宽度，不同的屏幕宽度范围 .

    语义：“固定宽度”

    您可以看到命名混淆是如何产生的 . 从技术上讲，我们可以说 .container 是"fixed width"，但它只是在它确实不是"fixed"的意义上是固定的，因为它总是保持在特定的像素宽度，因为它实际上可以改变大小 .

    From a fundamental perspective:

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

    Beyond

    您可以通过媒体查询使任何固定宽度元素响应，而不仅仅是 .container 元素，因为媒体查询正是后台引导程序实现 .container 的方式（请参阅JKillian对代码的回答） .

    回复于
  • 17

    如果希望页面的视口大小为 shapeshift with every little difference ，请使用 .container-fluid .

    如果希望页面为 shapeshift to only 4 kinds of sizes ，请使用 .container ，也称为 "breakpoints".

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

    • 超小:(仅限移动分辨率）

    • 小：768px（平板电脑）

    • 中：992px（笔记本电脑）

    • 大号：1200px（笔记本电脑/台式机）

    回复于
  • 153

    Updated 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 有4种尺寸 . xs 屏幕上的全宽，然后它的宽度因以下媒体查询而异 .

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

    container vs. container-fluid demo

    回复于
  • 5

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

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

    当使用 .container-fluid 因为witdh与视口宽度相关时，显示是动态的，因此变化更大，具有非常大的屏幕或不常见的屏幕宽度的用户可能会看到您不期望的结果 .

    回复于
  • 3

    你是对的3.1 .container-fluid和.container是相同的并且像容器一样工作，但如果你删除它们就像.container-fluid（全宽） . 他们已经删除了“移动第一种方法”的.container-fluid，但现在又回到了3.3.4（他们的工作方式不同）

    要获得最新的bootstrap，请阅读stackoverflow上的这篇文章，它将有助于 check it out .

    回复于

相关问题