REFERENCE

Question

我已经看到.container类在多个地方使用但从未理解它的用途。还有.container-fluid类。

任何人都可以用一个简短的例子来解释容器类的用法吗？

Answer 1

很简单。 div.container类应用fixed（应用margin自动）来包含你想要的内容。此容器具有响应性，因此当您处于XS模式（移动）时，容器宽度为100％。

.container-fluid只在所有设备中应用100％宽度（全宽），因此您将看到您的内容跨越视口的整个宽度。

检查这个的最好方法是创建一个带div的简单html并将其设置为背景颜色，然后应用.container和.container-fluid来查看调整资源大小的效果。

Answer 2

保证金和宽度是不同的！

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

           .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

        .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

通常容器流体不会在任何类型的屏幕中提供任何余量

但容器在md和lg屏幕

中提供了特定的保证金

REFERENCE

Answer 3

bootstrap中的.container类只是内容的容器。通过使用它们，您的内容可以利用自举网格系统。这些类还添加了一些样式，如填充，集中容器，并使其响应。

来自bootsrap

容器

Bootstrap需要一个包含元素来包装网站   内容并容纳我们的网格系统。你可以选择两个中的一个   要在项目中使用的容器。请注意，由于填充和   更多，这两个容器都不可嵌套。

使用.container作为响应式固定宽度容器。

<div class="container">
  ...
</div>

使用.container-fluid作为整个宽度的容器，跨越整个容器视口的宽度。

<div class="container-fluid">
  ...
</div>

容器类在Twitter Bootstrap 3中做了什么？

3 个答案:

REFERENCE