Dash Bootstrap Components布局间隙问题：如何让元素左对齐无间隙

问题说明 #

构建Dashboard时，已为dbc.Row设置className="g-0"和justify="start"，但页面元素仍分散排布且存在较大间隙，需要将所有元素集中在屏幕左侧且无任何间隙。使用的依赖版本：

• dash-bootstrap-components 1.6.0
• dash 2.17.1
• flask 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组件，但结果一致。

解决方案 #

问题核心是dbc.Col默认会自动分配宽度并带有内边距，仅设置Row的g-0不足以消除所有间隙。需做以下修改：

1. 给每个dbc.Col添加width="auto"：让列宽度自适应内容，避免不必要的拉伸
2. 给每个dbc.Col添加className="p-0"：移除列的内边距，消除内部间隙
3. 给dbc.Row添加align-items-center：让元素垂直居中（可选，优化视觉效果）

修改后的完整代码：

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'),
                width="auto",
                className="p-0"
            ),
            dbc.Col(
                [
                    html.Div(id='label_1', children='Original (years)'),
                    dcc.Input(id='orig_cell', type='number', value=0, readOnly=True),
                ],
                width="auto",
                className="p-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),
                ],
                width="auto",
                className="p-0"
            ),
            dbc.Col(
                dbc.Button("Apply", id="submit_override", n_clicks=0),
                width="auto",
                className="p-0"
            )
        ],
        className="g-0 align-items-center",
        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)

修改解释 #

• width="auto"：强制列仅占用内容所需宽度，不会默认分配网格比例，避免元素被拉散
• className="p-0"：移除列的默认内边距（padding），彻底消除元素间的间隙
• align-items-center：让行内所有元素垂直对齐，避免因元素高度不同导致的错位

内容的提问来源于stack exchange，提问作者Thoughtful_monkey