dash bootstrap组件中如何将输入框放在标签下方

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环境下。该问题解决了bootstrap组件中的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')

dash bootstrap组件中如何将输入框放在标签下方

How to put the input box below the label in dash bootstrap components

python

plotly

bootstrap-4

plotly-dash