在引导组件中使用行和列时出现破折号布局问题答案

【问题标题】：Dash layout issue when using Rows and Colums in Bootstrap Components在引导组件中使用行和列时出现破折号布局问题
【发布时间】：2021-12-18 04:30:09
【问题描述】：

我正在尝试创建一个简单的仪表板布局，但无法使其正常工作。它涉及在左侧的一列中具有两行不同高度的行，然后在右侧的一大列中。所以我设法做到了，但我无法获得第 1 列，与第 2 列和第 3 列齐平，我已经尝试了所有方法，但我对此并不陌生。

代码如下：

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title = " Dashboard"
app.layout = dbc.Container(
    [
    dbc.Row([    
    dbc.Col(html.Div([
        dbc.Row([dbc.Col(html.Div(html.B('2')),style={'height': '80px',"border":"1px black solid"},width=3)]),
    dbc.Row([dbc.Col(html.Div(html.B('3')),style={'height': '900px',"border":"1px black solid"},width=3)]),
        ])),
    dbc.Col(html.Div(html.B('1'), style={'height': '100%',"border":"1px black solid"})),
            ])
    ], fluid = True)

【问题讨论】：

标签： layout plotly-dash dashboard

【解决方案1】：

看来关键是要使用html.div，这里是解决办法。

from dash import Dash, html

import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.Div("2", style={"height": 80}, className="border"),
                        html.Div("3", style={"height": 900}, className="border"),
                    ],
                    width=3,
                ),
                dbc.Col(html.Div("1", className="vh-100 border")),
            ],
            className="g-0",
        )
    ],
    fluid=True, )

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

【讨论】：