表单布局（Layout）

每组表单字段都应该位于form元素中。Bootstrap没有为form元素提供默认样式，但是默认情况下提供了一些强大的浏览器功能。

由于Bootstrap将display:block和width:100%应用于几乎所有的表单控件，因此默认情况下表单将垂直堆叠。附加类可用于根据每个窗体更改此布局。

边距实用程序是向窗体添加某些结构的最简单方法。它们提供标签、控件、可选表单文本和表单验证消息的基本分组。我们建议坚持使用边距底部工具，并在整个表单中使用单一方向以保持一致性。

您可以随意使用fieldset、div或几乎任何其他元素构建表单。

使用我们的网格类可以构建更复杂的表单。对于需要多列、不同宽度和其他对齐选项的窗体布局，请使用这些选项。需要启用$enable-grid-classes变量（默认为on）。

通过添加间隙修改器类，可以控制内联方向和块方向上的间隙宽度。还需要启用$enable-grid-classes Sass变量（默认为on）。

也可以使用网格系统创建更复杂的布局。

通过将.row类添加到窗体组，并使用.col-*-* 类指定标签和控件的宽度，使用网格创建水平窗体。确保将.col表单标签也添加到label中，以便它们与相关表单控件垂直居中。

有时，您可能需要使用margin或padding实用程序来创建所需的完美对齐。例如，我们移除了堆叠的单选按钮标签上的填充顶部，以便更好地对齐文本基线。

请确保对code>或使用 .col-form-label-sm或，以正确遵循.form-control-lg和.form-control-sm的大小。

如前面的示例所示，我们的网格系统允许您在一行中放置任意数量的.col。他们将平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间，而其余的.col会使用特定的列类（如.col-sm-7）来平均分割其余的列。

下面的示例使用弹性盒子实用类将内容垂直居中，并将.col更改为.col-auto，以便列只占用所需的空间。换句话说，列的大小是基于内容的。

然后您可以再次将其与特定于大小的列类混合。

使用.row-cols-*类创建响应的水平布局。通过添加间隙修饰符类，我们将在水平和垂直方向上创建间隙。在狭窄的移动视口中，.col-12有助于堆叠窗体控件等。.align-items-center将表单元素与中间对齐，使.form-checkbox正确对齐。