本文详解如何使用 Dash Bootstrap Components（dbc）的 dbc.Row 和 dbc.Col 实现两个 Plotly 图表的响应式并排布局，替代传统 className="six columns" 的旧式写法，提升代码可维护性与移动端兼容性。
本文详解如何使用 dash bootstrap components（dbc）的 `dbc.row` 和 `dbc.col` 实现两个 plotly 图表的响应式并排布局，替代传统 `classname="six columns"` 的旧式写法，提升代码可维护性与移动端兼容性。
在 Dash 应用中，实现图表并排显示是常见需求，但仅依赖原始 Dash HTML 组件（如 html.Div 配合 className="six columns"）易导致布局僵硬、响应式失效，尤其在小屏幕设备上无法自适应。推荐采用官方推荐的 Dash Bootstrap Components（DBC）——它封装了 Bootstrap 5 的栅格系统，提供语义清晰、灵活可控的布局工具。
✅ 推荐做法：使用 dbc.Row + dbc.Col
首先确保已安装并导入必要模块：
import dash from dash import html, dcc import dash_bootstrap_components as dbc # ← 必须安装：pip install dash-bootstrap-components
然后重构布局：将 graph2 和 graph3（及其控制组件）分别包裹在 dbc.Col 中，并统一置于 dbc.Row 下。每列宽度可通过 width 参数精确控制（支持整数、字典响应式配置）：
header = html.H2("Fast Food in U.S.")
row1 = html.Div([graph1], className="eight columns") # 保留原有单图区域（可选）
graphs_div = dbc.Row([
dbc.Col([
multi_select_graph2,
graph2
], width=6), # 桌面端占 6/12 列（即 50%）
dbc.Col([
dropdown_graph3,
graph3
], width=6)
], className="mt-4") # 添加顶部间距，提升视觉层次
layout = html.Div([
header,
row1,
graphs_div
], style={"text-align": "center", "padding": "0 20px"})
app.layout = layout
? 关键优势说明
- 响应式友好：width 支持字典形式，例如 width={"size": 6, "sm": 12, "md": 6, "lg": 5}，可在移动设备（sm）下自动堆叠为上下排列，桌面端保持并排；
- 语义清晰：dbc.Row / dbc.Col 明确表达“行—列”结构，比嵌套 html.Div + className 更易读、易调试；
- 样式隔离：避免手动管理 className="row" 或 "six columns" 等易出错的 Bootstrap 类名，降低 CSS 冲突风险。
⚠️ 注意事项
- 若未安装 dash-bootstrap-components，请运行 pip install dash-bootstrap-components 并在 app = dash.Dash(...) 初始化时传入主题（如 external_stylesheets=[dbc.themes.BOOTSTRAP]），否则样式可能异常；
- 不要混用旧式 className="columns" 与 DBC 组件——二者基于不同 CSS 框架，混用会导致栅格计算错误；
- 所有 dbc.Col 必须直接位于 dbc.Row 内，嵌套层级错误将破坏布局流。
通过以上方式，你不仅能稳定实现双图并排，还能为后续添加筛选器、统计卡片或动态控件预留清晰、可扩展的布局骨架。
