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

Question

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

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

Answer 1

在引导的.container类就是这样，你的内容的容器。通过使用它们，您的内容可以利用自举网格系统。这些类还添加了一些样式，如填充，居中对齐容器，并使其响应。

从bootsrap

集装箱

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

将.container用于响应固定宽度的容器。

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

使用.container流体为全宽的容器，覆盖了整个 宽度视口的。

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

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

这很简单。一个div.container类应用一个固定的（应用margin auto）来包含你想要的内容。而且这个容器是响应式的，所以当你处于XS模式（移动）时，容器宽度是100％。

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

检查此问题的最佳方法是使用div创建简单的html并将其设置为背景颜色，然后应用.container和.container-fluid以查看调整您的资源管理器的效果。