容器

的容器元素是一个完美的伴侣部分元素。当我们放置容器在一个部分，将元素放置在容器- - -容器保持内容整齐地组织在屏幕的中心。

在这节课中:

1. 容器解剖
2. 添加一个容器
3. Custom-width容器
4. 集装箱填充
5. 重用容器
6. 集装箱和Div块
   

容器解剖

一个容器是一个Div块与预定义的样式。它具有940像素的最大宽度，在更大的显示器上保持你的内容相对于浏览器窗口居中。在较小的设备上(如手机和平板电脑)，容器横跨整个屏幕宽度。

添加一个容器

你可以添加一个容器元素面板(A)中的布局部分中的元素。

然后，您可以放置新元素或将内容移动到容器．

Custom-width容器

默认情况下,容器元素是自动响应的。但有时您需要一个更宽的容器，而不是默认的最大宽度(940像素)。

你可以通过两步来完成

1. 添加一个类到容器(如容器)
2. 设置最大宽度(例如1100像素)。

现在,容器将响应您的视口的大小，但只扩展到您设置的最大宽度。

更大的断点

还可以对容器对于比默认值大的断点。如果你想要容器宽度更适合更大的显示-你可以在4个步骤:

1. 单击添加大断点选项(基本断点旁边的三个点)
2. 选择任何较大的断点
3. 然后，确保选择你的容器元素
4. 最后，更改最适合所选断点的最大宽度样式

注意:总是返回到基本断点来继续设计项目。究其原因，正是因为此:所作的改动风格的面板从底部向外层叠。

更改向下级联到较小的断点。

并从基本断点向上延伸到更大的断点。

集装箱填充

你可以用你的容器添加元素周围的空间。在我们的例子中，内容被推送到移动环境断点的边缘。

这是因为容器对于移动设备来说是全宽的，并且容器内的元素位于边缘。您可以调整填充，以提供一些良好的呼吸空间。

要做到这一点:

1. 在画布上选择Container元素(在我们的例子中，我们将其命名为Container)
2. 在样式面板中，添加左右填充(例如20像素)

那个样式将然后传递到移动人像以及。

重用容器

因为你已经给了你的容器一个类(在我们的例子中，我们将其命名为“Container”)，您可以将该类应用到您添加到项目中的其他容器。

应用一个类:

1. 选择画布上的一个元素
2. 中键入类名选择器场
3. 新闻返回

请注意:对该类样式的更改将影响应用该类的所有容器。了解更多关于类．

集装箱和Div块

section内部的容器是web开发中常见的层次结构

一个部分，默认为全宽度。在部分，你有一个容器，这使得里面的所有东西都整齐地向中心靠拢。

在设计项目时，Div块是最基本和最通用的元素，因为它可以是你想要的任何东西。您可以使用容器内的Div块来组织您的元素使用布局，间距，大小,位置风格。

请注意:一个部分是一个Div块这是全宽度和a容器是一个Div块它默认有一个最大宽度。

以上是Webflow设计器中容器的概述。