dash-bootstrap-components的dbc.Row布局无法实现子弹图并排显示求助

问题排查与修复方案 #

1. 核心布局错误

你的栅格结构嵌套不符合Bootstrap规则：dbc.Row的直接子元素必须是dbc.Col才能实现横向排布，你在dbc.Row和dbc.Col中间额外套了一层html.Div，导致栅格样式失效，图表自然垂直堆叠。同时app.layout定义行前多了多余缩进，会引发语法错误，需要先删掉。

2. 修复后的代码示例

仅需要修改"In Progress"对应的折叠模块代码即可，其余代码保持不变：

dbc.Collapse(
    dbc.CardBody([
        # 移除Row外层多余的html.Div，直接在Row下写Col
        dbc.Row([
            dbc.Col(
                dcc.Graph(id='bullet-chart1', 
                    figure=ff.create_bullet(
                        data, titles="title",
                        ranges='ranges',
                        measures='measures',
                        title=None, autosize=True,
                        width=450, height=300,
                    ),  
                ),
                width=6 # 两列各占一半宽度，总宽度为12
            ),
            dbc.Col(
                dcc.Graph(id='bullet-chart2',
                    figure=ff.create_bullet(
                        data2, ranges='ranges',
                        measures='measures',
                        title=None, autosize=True,
                        width=450, height=300
                    )
                ),
                width=6
            )
        ])
    ]),
    id="collapseInProgress", is_open=True
),

3. 依赖兼容排查

如果修改代码后问题仍存在，执行以下命令统一升级相关依赖即可解决版本冲突：
pip install dash dash-bootstrap-components --upgrade

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