Python Dash创建多列布局时内容纵向堆叠问题排查

使用dash_bootstrap_components（简称dbc）的Row/Col栅格布局时，必须在应用初始化阶段加载Bootstrap配套CSS样式，否则栅格规则不会生效，所有列会默认以块级元素形式纵向堆叠，和你遇到的表现完全一致。你的现有代码漏掉了样式加载的必要配置。

初始化Dash应用时，给external_stylesheets参数传入dbc内置的Bootstrap样式表即可，修复后的可运行代码如下：

from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc

# 关键配置：加载Bootstrap样式，是dbc布局组件生效的前提
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H4('Zeitraum'),
        ], width=6),
        dbc.Col([
            html.H4('Test'),
        ], width=6)
    ]),
    dbc.Row([
        dbc.Col([
            html.H4('Test2')
        ], width=6),
        dbc.Col([
            html.H4('Test3')
        ], width=6)
    ]),
])

app.run_server(debug=True)

• dbc.themes.BOOTSTRAP是官方默认基础主题，你也可以替换成dbc提供的其他内置主题（比如dbc.themes.FLATLY、dbc.themes.DARKLY等），栅格布局的分列逻辑不会受主题切换影响。
• 配置生效后，每行内两个width=6的列会自动平分行宽，实现标准两列并排效果。

你遇到的纵向堆叠错误运行效果参考：

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