在破折号 bootstrap 组件示例中使用列

Question

短划线 Form 组件的（例如）“水平形式”代码示例 bootstrap 组件文档（https://dash-bootstrap-components.opensource.faculty.ai/docs/components/form/ ) 看起来像这样：

# ...
email_input = dbc.Row(
    [
        dbc.Label("Email", html_for="example-email-row", width=2),
        dbc.Col(
            dbc.Input(
                type="email", id="example-email-row", placeholder="Enter email"
            ),
            width=10,
        ),
    ],
    className="mb-3",
)
# ...

为什么 Input 组件在 Col 中，而 Label 不是？

Answer 1

来自 dbc 文档：

Create a horizontal form by using the Row component. Be sure to specify width on the Label component, and wrap your inputs in Col components.

当指定 width 参数时，

Label 充当“col-type”元素。因此，当 width=2 时，标签的宽度将是两列，其余 (10) 将由 dbc.Col() 填充（在您的示例中，您有 width=10 但您可以省略此参数） .

请参阅 Bootstrap 文档中的示例，使用类似的方法 (https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text)。标签有 col-sm-2 col-form-label 类.

在破折号 bootstrap 组件示例中使用列

Usage of Columns in dash bootstrap components example

python

plotly-dash

dash-bootstrap-components