使用Bootstrap组件Row与Column时的Dash布局问题

你遇到的布局问题核心是栅格宽度设置层级错误、父级高度规则缺失，按以下方式修改代码即可实现需求：

修改要点 #

• 把原来写在内部2、3列上的width=3挪到包裹它们的左侧外层Col上，避免内部宽度限制撑出多余空白
• 给最外层的Row加className="g-0 align-items-stretch"，g-0用来取消列之间的默认间距实现贴合，align-items-stretch让所有子列自动撑满整个Row的高度，右侧列不需要手动写100%高度也能自适应
• 删掉左侧内部两个行外层多余的html.Div嵌套，减少不必要的DOM结构干扰布局

修复后完整代码 #

import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title = " Dashboard"
app.layout = dbc.Container(
    [
        dbc.Row(
            [
                # 左侧列：包含2、3两个行
                dbc.Col(
                    [
                        dbc.Row(
                            dbc.Col(
                                html.Div(html.B('2')),
                                style={'height': '80px', "border": "1px black solid"}
                            )
                        ),
                        dbc.Row(
                            dbc.Col(
                                html.Div(html.B('3')),
                                style={'height': '900px', "border": "1px black solid"}
                            )
                        )
                    ],
                    width=3 # 左侧整列占3份栅格宽度
                ),
                # 右侧大列：自动占满剩余宽度，高度自动撑满和左侧对齐
                dbc.Col(
                    html.Div(html.B('1')),
                    style={"border": "1px black solid"}
                )
            ],
            className="g-0 align-items-stretch" # 取消列间距、子元素高度自适应撑满
        )
    ], 
    fluid = True
)

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

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