将仪表板中的InputGroupAddon与Python垂直对齐

Question

我正在做仪表板。我正在使用一些dash_bootstrap_componentsInputGroup。这就是我到目前为止所做的：

我想垂直对齐InputGroupAddon{}和InputGroupAddon{}的InputGroup，类似于：

我想拉伸dbc.InputGroupAddon{}和dbc.InputGroupAddon{}宽度，让dbc.Input自动调整以填充宽度。
我想将总宽度保持在400。
这是我的密码：

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc


n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5


app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])

app.layout = html.Div(id = 'general_div',
                      children = [html.Div(id = 'options_div',
                                           children = [dbc.InputGroup([dbc.InputGroupAddon(children = 'Option A',
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 't_ON_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = 'unit',
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = 'Option B',
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 't_OFF_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = 'an other unit',
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = 'Some text here',
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 'T_start_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = 'something',
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = 'Last option',
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 'voltage_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = 'last unit',
                                                                                           addon_type = 'append')])],

                                           style = {'display': 'inline-block',
                                                    'vertical-align': 'top',
                                                    'margin-left': '3vw',
                                                    'margin-top': '3vw',
                                                    'width': 400})])

if __name__ == "__main__":
    app.run_server()

我尝试在style参数下指定'width'，如下所示：

dbc.InputGroupAddon(children = 'Option A',
                    addon_type = 'prepend',
                    style = {'width': 200}),
dbc.Input(id = 't_ON_input',
          type = 'number',
          min = v_min,
          max = v_max,
          step = v_step,
          value = v_0),
dbc.InputGroupAddon(children = 'unit',
                    addon_type = 'append')

但我明白了：

dbc.InputGroup在dbc.InputGroupAddon和dbc.Input之间断开

版本信息

Python                       3.7.0
dash                         1.12.0
dash-bootstrap-components    0.10.1
dash-html-components         1.0.3

Answer 1

我终于设法解决了这个问题。
我为文本跨度分配了一个类，并链接了一个本地css样式表（位于文件夹assets\）：

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc


n = 19
v_min = 0
v_max = 10
v_step = 1
v_0 = 5


app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP, 'box_style.css'])


app.layout = html.Div(id = 'general_div',
                      children = [html.Div(id = 'options_div',
                                           children = [dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option A',
                                                                                                                className = 'prepend-text'),
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 't_ON_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = html.Span(children = 'unit',
                                                                                                                className = 'append-text'),
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Option B',
                                                                                                                className = 'prepend-text'),
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 't_OFF_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = html.Span(children = 'another unit',
                                                                                                                className = 'append-text'),
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Some text here',
                                                                                                                className = 'prepend-text'),
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 'T_start_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = html.Span(children = 'something',
                                                                                                                className = 'append-text'),
                                                                                           addon_type = 'append')]),

                                                       dbc.InputGroup([dbc.InputGroupAddon(children = html.Span(children = 'Last option',
                                                                                                                className = 'prepend-text'),
                                                                                           addon_type = 'prepend'),
                                                                       dbc.Input(id = 'voltage_input',
                                                                                 type = 'number',
                                                                                 min = v_min,
                                                                                 max = v_max,
                                                                                 step = v_step,
                                                                                 value = v_0),
                                                                       dbc.InputGroupAddon(children = html.Span(children = 'last unit',
                                                                                                                className = 'append-text'),
                                                                                           addon_type = 'append')])],

                                           style = {'display': 'inline-block',
                                                    'vertical-align': 'top',
                                                    'margin-left': '3vw',
                                                    'margin-top': '3vw',
                                                    'width': 400})])


if __name__ == "__main__":
    app.run_server()

我从dash默认值复制了样式表类，并添加了width、border-radius和text-align属性（width是解决上述问题的关键属性，其余用于进一步的美学调整）。这里是我的本地css：

.prepend-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    width: 150px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0.25rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: 130px;
    text-align: right;
}

.append-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    width: 120px;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0rem;
}

这给了我这个布局：