如何将输入框放在破折号引导组件中的标签下方

Question

输入框放在标签正下方，不对齐的正确做法是什么？我尝试这样做超过 4 小时，但无法做到。

与产品相关的持续时间标签和输入是完美的，这正是我想要的，但幸运的是，因为文本很大。我怎样才能对别人做同样的事情？我尝试了其他一些方法，例如添加空格或ClassName="form-control" 和其他一些方法，但都没有正常工作，它使表单太大。

我正在使用的代码 -

controls = dbc.Card(
    [
    
        dbc.FormGroup(
            [
                dbc.Label("Page Value", size="md"),
                dcc.Input(
                    id="page-value-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Exit Rate", size="md"),
                dcc.Input(
                    id="exit-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Bounce Rate", size="md"),
                dcc.Input(
                    id="bounce-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related", size="md"),
                dcc.Input(
                    id="product-related-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related Duration", size="md"),
                dcc.Input(
                    id="product-related-dur-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
    ],
    body=True,
)

dbc.Row(
            [dbc.Col(controls, md=4), dbc.Col(dcc.Graph(id="cluster-graph"), md=8)],
            align="center",
        ),

Answer 1

如果.form-control 样式不适合您，那么您可以简单地将.w-100 添加到标签中。这应该与导致输入换行的更宽标签具有相同的效果。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<form>

  <div class="form-group">
    <label for="formGroupExampleInput" class="w-100">class="w-100" Example label</label>
    <input type="text" class="" id="formGroupExampleInput" placeholder='class="" Example input placeholder'>
  </div>

  <div class="form-group">
    <label for="formGroupExampleInput2">class="" Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder='class="form-control" Another input placeholder'>
  </div>

</form>

Answer 2

我在 Jupyterlab 环境中运行它。该问题解决的是引导组件中的 Input()，而不是 Dash 组件中的 Input()。

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from jupyter_dash import JupyterDash

app = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

controls = dbc.Card(
    [
    
        dbc.FormGroup(
            [
                dbc.Label("Page Value", size="md"),
                dbc.Input(
                    id="page-value-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Exit Rate", size="md"),
                dbc.Input(
                    id="exit-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Bounce Rate", size="md"),
                dbc.Input(
                    id="bounce-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related", size="md"),
                dbc.Input(
                    id="product-related-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related Duration", size="md"),
                dbc.Input(
                    id="product-related-dur-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
    ],
style={"width": "18rem"}, body=True
)

rows = dbc.Row([
    dbc.Col(controls, md=4),
    dbc.Col(html.Div(dcc.Graph(id="cluster-graph")), md=8)
],
    align="center")

app.layout = rows

if __name__ == "__main__":
    # app.run_server()
    app.run_server(mode='inline')