Dash中Plotly图表在预定义网格内跳动的解决方案咨询

你的问题根源在于Bootstrap响应式栅格默认会在小屏幕下自动堆叠列，加上图表缩放时的尺寸变化触发了断点阈值，导致布局切换。可以通过以下几种方式固定2×2布局：

方法1：强制所有断点保持列宽 #

给dbc.Col明确指定所有响应式断点的宽度为6，确保在任何屏幕尺寸下都维持两列布局：

import dash_core_components as dcc
import dbc

layout = dbc.Container([
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p1)], width={"xs": 6, "sm": 6, "md": 6, "lg": 6, "xl": 6}),
        dbc.Col([dcc.Graph(figure=p2)], width={"xs": 6, "sm": 6, "md": 6, "lg": 6, "xl": 6}),
    ]),
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p3)], width={"xs": 6, "sm": 6, "md": 6, "lg": 6, "xl": 6}),
        dbc.Col([dcc.Graph(figure=p4)], width={"xs": 6, "sm": 6, "md": 6, "lg": 6, "xl": 6}),
    ])
])

注：xs对应超小屏幕（<576px），sm（≥576px）、md（≥768px）等，统一设置为6就能强制所有尺寸下保持两列结构。

方法2：禁用行的响应式换行 #

给dbc.Row添加no_gutters=True减少列间距，同时通过CSS强制行内元素不换行，再给图表设置最小宽度避免过度缩放：

import dash_core_components as dcc
import dbc

layout = dbc.Container([
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p1, style={"minWidth": "400px"})], width=6),
        dbc.Col([dcc.Graph(figure=p2, style={"minWidth": "400px"})], width=6),
    ], no_gutters=True, style={"flex-wrap": "nowrap"}),
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p3, style={"minWidth": "400px"})], width=6),
        dbc.Col([dcc.Graph(figure=p4, style={"minWidth": "400px"})], width=6),
    ], no_gutters=True, style={"flex-wrap": "nowrap"})
], fluid=True)

方法3：使用流体容器+固定列最小占比 #

将dbc.Container设置为fluid=True让容器随窗口自适应，同时给图表设置最小宽度占比，避免列被挤压换行：

import dash_core_components as dcc
import dbc

layout = dbc.Container([
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p1, style={"minWidth": "45%"})], width=6),
        dbc.Col([dcc.Graph(figure=p2, style={"minWidth": "45%"})], width=6),
    ]),
    dbc.Row([
        dbc.Col([dcc.Graph(figure=p3, style={"minWidth": "45%"})], width=6),
        dbc.Col([dcc.Graph(figure=p4, style={"minWidth": "45%"})], width=6),
    ])
], fluid=True)

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