表单布局（Layout）
2025-09-29 16:16:44
Forms
每组表单字段都应该位于form元素中。Bootstrap没有为form元素提供默认样式，但是默认情况下提供了一些强大的浏览器功能。
不熟悉浏览器窗体？考虑查看 MDN表单文档以获得可用属性的概述和完整列表。
form中的button默认为type="submit"，因此要尽量具体并始终包含一个type。
您可以使用form上的disabled属性禁用表单中的每个表单元素。
由于Bootstrap将display:block和width:100%应用于几乎所有的表单控件，因此默认情况下表单将垂直堆叠。附加类可用于根据每个窗体更改此布局。
通用类
边距实用程序是向窗体添加某些结构的最简单方法。它们提供标签、控件、可选表单文本和表单验证消息的基本分组。我们建议坚持使用边距底部工具，并在整个表单中使用单一方向以保持一致性。
您可以随意使用fieldset、div或几乎任何其他元素构建表单。
Example label
Another label
Copy
表单网格
使用我们的网格类可以构建更复杂的表单。对于需要多列、不同宽度和其他对齐选项的窗体布局，请使用这些选项。需要启用$enable-grid-classes变量（默认为on）。
Copy
间隙
通过添加间隙修改器类，可以控制内联方向和块方向上的间隙宽度。还需要启用$enable-grid-classes Sass变量（默认为on）。
Copy
也可以使用网格系统创建更复杂的布局。
Password
Address
Address 2
City
State
Choose...
...
Zip
Check me out
Sign in
Copy
水平表单
通过将.row类添加到窗体组，并使用.col-*-* 类指定标签和控件的宽度，使用网格创建水平窗体。确保将.col表单标签也添加到label中，以便它们与相关表单控件垂直居中。
有时，您可能需要使用margin或padding实用程序来创建所需的完美对齐。例如，我们移除了堆叠的单选按钮标签上的填充顶部，以便更好地对齐文本基线。
Password
Radios
First radio
Second radio
Third disabled radio
Example checkbox
Sign in
Copy
水平表单标签大小
请确保对code>
Copy
列大小
如前面的示例所示，我们的网格系统允许您在一行中放置任意数量的.col。他们将平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间，而其余的.col会使用特定的列类（如.col-sm-7）来平均分割其余的列。
Copy
自动调整大小
下面的示例使用弹性盒子实用类将内容垂直居中，并将.col更改为.col-auto，以便列只占用所需的空间。换句话说，列的大小是基于内容的。
Name
Username
@
Preference
Choose...
One
Two
Three
Remember me
Submit
Copy
然后您可以再次将其与特定于大小的列类混合。
Name
Username
@
Preference
Choose...
One
Two
Three
Remember me
Submit
Copy
行内表单
使用.row-cols-*类创建响应的水平布局。通过添加间隙修饰符类，我们将在水平和垂直方向上创建间隙。在狭窄的移动视口中，.col-12有助于堆叠窗体控件等。.align-items-center将表单元素与中间对齐，使.form-checkbox正确对齐。
Username
@
Preference
Choose...
One
Two
Three
Remember me
Submit
Copy