Css 在 dbc.Container 上方包含横幅 Dash

我认为你应该在卡片上面多加一行，你将需要将3个图表合并成一个有2列的行，并改变右侧图表的高度.

请判断以下代码:

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

df = px.data.gapminder()
fig = px.area(df, x="year", y="pop", color="continent", line_group="country")
# 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([
        html.Img(src=r'assets/hong-kong-skyline-panorama.jpg', alt='image')
    ]),
    dbc.Row([
        # to be used as a sidebar
        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.Col(card),
                dbc.Col(card),
                dbc.Col(card)
            ]),
            dbc.Row([
                dbc.Col([dbc.Card(dcc.Graph(figure=fig),style={'height':400}),
                         dbc.Card(dcc.Graph(figure=fig),style={'height':400})
                        ], width=6),
                dbc.Col([dbc.Card(dcc.Graph(figure=fig,style={'height':800}),style={'height':800})], width=6),            
            ]),
        ], width=10),
    ], className='p-2 align-items-stretch')
], fluid=True)


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

And here is the result: