在 Bootstrap 组件中使用行和列时出现破折号布局问题

Question

我正在尝试创建一个简单的仪表板布局，但无法让它工作。它涉及在左侧的一列中有两行不同高度，然后在右侧有一个大列。所以我设法做到了，但我无法获得第 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)

Answer 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)

在 Bootstrap 组件中使用行和列时出现破折号布局问题

Dash layout issue when using Rows and Colums in Bootstrap Components

layout

plotly-dash

dashboard