Plotly Dash Bootstrap Components行列布局与官方示例不符问题排查

你的代码使用了dash-bootstrap-components（dbc）的Row和Col组件实现栅格布局，但没有引入Bootstrap的样式表，导致dbc布局组件无法生效，所有列只能垂直堆叠，无法呈现官网示例中的横向分栏效果。

解决步骤 #

在初始化Dash应用时，添加external_stylesheets参数引入Bootstrap样式文件即可：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

# 引入Bootstrap样式表，让dbc布局组件生效
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

main_content = html.Div(
    [
        dbc.Row(dbc.Col(html.Div("A single, half-width column"), width=12)),
        dbc.Row(
            dbc.Col(html.Div("An automatically sized column"), width="auto")
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"), width=3),
                dbc.Col(html.Div("One of three columns")),
                dbc.Col(html.Div("One of three columns"), width=3),
            ]
        ),
    ]
)

app.layout = main_content

if __name__ == '__main__':
    app.run_server(debug=True,)

原理说明 #

dash-bootstrap-components的Row、Col等布局组件完全依赖Bootstrap的CSS栅格系统，只有加载对应的样式表，组件才能识别width等布局属性，实现横向分栏效果。如果不加载样式，这些组件会退化成普通块级元素，只能垂直堆叠显示。

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