我们承诺每个页面只显示一个小型广告。别担心，隐藏此消息将确保您不会再次收到烦人的提醒。
介绍
使用
全局
元素
集合
视图
模块
行为
容器是一种元素，旨在根据用户屏幕的大小，将页面元素包含在一个合理的最大宽度内。这对与其他 UI 元素（如 网格 或 菜单）结合使用很有用，可以将它们的宽度限制在合理的显示尺寸内。
容器旨在根据显示它们的屏幕大小自适应地调整其最大宽度。
| 移动设备 | 平板电脑 | 小型显示器 | 大型显示器 | |
|---|---|---|---|---|
| 宽度 | 100% | 723px | 933px | 1127px |
| 内边距大小 | 1em | 流体 | 流体 | 流体 |
| 可变 | $largestMobileScreen |
$mobileBreakpoint |
$smallMonitorBreakpoint |
$largeMonitorBreakpoint |
| 设备宽度 | 低于 768px | 768px - 991px | 992px - 1200px | 高于 1200px |
由于语义 UI 中的变体仅在组件范围内分配，因此没有“自由浮动”的响应式类名，但某些组件包括响应式变体以帮助简化响应式设计。例如，网格 包括响应式类，用于根据设备类型隐藏或显示 column、row。
容器在每个设备尺寸下以相同的宽度出现。此大小是通过程序化确定给定设备断点内可用的最大设备宽度来计算的，前提是需要最小内边距大小。
例如，要确定平板电脑容器大小，使用以下公式
这与 768px - (14px * 2) - 17px 或 723px 相同
调整 site.variables 中的站点断点以使用自定义值将自动调整容器宽度。
标准容器
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
容器可以减小其最大宽度，更自然地适应单列文本。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
容器可以指定其文本对齐方式。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
流体容器没有最大宽度
家犬从它们的狼祖先那里继承了复杂的习性，例如咬合抑制，它们本来是具有复杂肢体语言的群居猎手。这些复杂的社会认知和交流方式可能解释了它们的训练能力、玩耍能力以及适应人类家庭和社会环境的能力，而这些属性使狗与人类的关系得以建立，使它们成为当今地球上最成功的物种之一。
狗对早期人类狩猎采集者的价值使它们很快在世界各地文化中无处不在。狗为人类执行许多角色，例如狩猎、放牧、拉载重物、保护、协助警察和军队、陪伴以及最近协助残疾人。对人类社会的影响使它们在西方世界被称为“人类最好的朋友”。然而，在某些文化中，狗也是肉的来源。
容器可以在菜单内使用，以确保菜单项与页面内容内联显示。使用 堆叠 等响应式变体菜单可以帮助内容适应不同的设备尺寸。
容器可以与 段落 一起使用
家犬从它们的狼祖先那里继承了复杂的习性，例如咬合抑制，它们本来是具有复杂肢体语言的群居猎手。这些复杂的社会认知和交流方式可能解释了它们的训练能力、玩耍能力以及适应人类家庭和社会环境的能力，而这些属性使狗与人类的关系得以建立，使它们成为当今地球上最成功的物种之一。
狗对早期人类狩猎采集者的价值使它们很快在世界各地文化中无处不在。狗为人类执行许多角色，例如狩猎、放牧、拉载重物、保护、协助警察和军队、陪伴以及最近协助残疾人。对人类社会的影响使它们在西方世界被称为“人类最好的朋友”。然而，在某些文化中，狗也是肉的来源。