Dash布局调整需求：在dbc.Container上方加横幅并统一图表高度

1. 添加顶部横幅 #

在现有布局最外层的dbc.Container中，在原有内容行之前插入一个全宽的横幅行，用dbc.Row包裹占满12列的横幅内容即可。

2. 匹配右侧图表与左侧双图表总高度 #

通过Bootstrap的flex布局实现：给右侧列添加垂直flex布局类，让图表行自动填充剩余空间，高度与左侧两个图表总和对齐。

修改后的完整代码 #

from dash import Dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

# generic card
card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    className='text-center m-4'
)

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = Dash(__name__, external_stylesheets = external_stylesheets)

# Set up the layout with a single graph
app.layout = dbc.Container([
    # 新增顶部横幅
    dbc.Row(
        dbc.Col(
            html.Div("仪表盘顶部横幅", className="bg-primary text-white p-3 text-center fs-4"),
            width=12
        ),
        className="mb-4"
    ),
    # 原有内容行
    dbc.Row([
        # 侧边栏
        dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
        # 左侧内容列
        dbc.Col([
            dbc.Row([
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card)
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph(), style={
                        "padding-top": "10px",
                        "padding-bottom": "10px",
                    },),
            ]),
            dbc.Row([
                dbc.Col([dcc.Graph()]),
            ]),
        ], width=5, className="h-100"),
        # 右侧内容列：调整flex布局匹配高度
        dbc.Col([
            dbc.Row([
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card),
            ]),
            dbc.Row([
                dbc.Col([dcc.Graph()]),
            ], style={"flex-grow": 1, "padding-top": "10px"}),
        ], width=5, className="d-flex flex-column h-100"),
    ], className="h-100")
], fluid=True, className="vh-100")


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

关键改动说明 #

• 顶部横幅：新增的dbc.Row占满12列，通过bg-primary、p-3等Bootstrap类设置样式，mb-4添加底部间距与下方内容分隔。
• 高度匹配：
  • 给右侧列添加d-flex flex-column h-100，让内部元素垂直排列并占满父容器高度；
  • 右侧图表行设置flex-grow:1，使其自动填充卡片行下方的剩余空间，高度与左侧两个图表的总高度一致；
  • 给左侧列和最外层内容行添加h-100，确保整体高度对齐。

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