布局间隙破折号 dbc 组件

Question

我正在尝试构建一个仪表板。问题是即使我指定 className="g-0" 和 justify="start"。我的元素散布在屏幕上，间隙很大。我需要它们集中在屏幕左侧，没有任何间隙。

版本：

• dash-bootstrap-组件 1.6.0
• 破折号2.17.1
• 烧瓶3.0.3

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import flask
layout = html.Div([dbc.Row(
    [
        dbc.Col(html.Span(
            "Table",
            className='top-bottom-title'
        )),
        dbc.Col([
            html.Div(id='label_1',
                     children='Original (years)'),
            dcc.Input(id='orig_cell', type='number',
                      value=0, readOnly=True),
        ], className="g-0"),
        dbc.Col([
            html.Div(id='label_2',
                     children='Override (years)'),
            dcc.Input(id='new_cell', type='number',
                      value=0, step=1/12, min=0),
        ], className="g-0"),
        dbc.Col([
            dbc.Button(
                "Apply", id="submit_override", n_clicks=0
            ),], className="g-0")
    ],
    className="g-0",
    justify="start"
)
]
)

if __name__ == "__main__":
    server = flask.Flask(__name__)
    app = Dash(__name__, external_stylesheets=[
               dbc.themes.BOOTSTRAP], server=server, suppress_callback_exceptions=True)
    app.title = "Analytics"
    app.layout = layout
    app.run_server(debug=True, host="0.0.0.0", port=40000)

除了使用 dbc.Row 参数之外：className="g-0" 和 justify="start"。我也尝试使用水平 dbc.Stack 代替，但得到了相同的结果

Answer 1

我看到的是

.col

类名有一个名为

flex

的元素样式属性，该属性设置为 100。您可以在每一列中手动将其更改为 0，然后您将把所有内容放在一起。元素之间不会有空格，但您可以添加一些空间，在列内的元素中添加一些填充。

试试这个，它对我有用（虽然看起来不太好，但我想这就是你正在寻找的！）

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import flask
layout = html.Div([dbc.Row(
    [
        dbc.Col(html.Span(
            "Table",
            className='top-bottom-title'
        ),
        style={'flex': 0}),
        dbc.Col([
            html.Div(id='label_1',
                     children='Original (years)'),
            dcc.Input(id='orig_cell', type='number',
                      value=0, readOnly=True),
        ], className="g-0", style={'flex': 0}),
        dbc.Col([
            html.Div(id='label_2',
                     children='Override (years)'),
            dcc.Input(id='new_cell', type='number',
                      value=0, step=1/12, min=0),
        ], className="g-0", style={'flex': 0}),
        dbc.Col([
            dbc.Button(
                "Apply", id="submit_override", n_clicks=0
            ),], className="g-0", style={'flex': 0})
    ],
    className="g-0",
    justify="start"
)
]
)

if __name__ == "__main__":
    server = flask.Flask(__name__)
    app = Dash(__name__, external_stylesheets=[
               dbc.themes.BOOTSTRAP], server=server, suppress_callback_exceptions=True)
    app.title = "Analytics"
    app.layout = layout
    app.run_server(debug=True, host="0.0.0.0", port=40000)