Plotly-Dash:如何将组件跨越两行

Question

我正在尝试使用dash和引导网格创建一个仪表板。以下是我试图实现的目标：

​

​

根据文档(https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/)，我可以在行中创建列，但是有没有在列中创建行的方法呢？我需要我的图表跨越两个“行”以前的列。我认为这可以通过以下方式实现：

dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content])])

然而，这些列只是堆叠在一起。下面是我的前两列代码：

    app.layout =   dbc.Col([
    dbc.Col([ html.H1("temp1",style={'textAlign': 'center' ,'height':'5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_1', children=['Sales'], className='card-title'),
                                        html.P(id='card_text_1', children=['Sample text.'])
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height':'30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_2', children=['Eng'], className='card-title'),
                                        html.P(id='card_text_2', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_3', children=['Diff'], className='card-title'),
                                        html.P(id='card_text_3', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                    ], style={'height': '90vh','width':'50vh'}),


    dbc.Col([ html.H1("temp2",style={'textAlign': 'center' ,'height': '5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_4', children=['Card Title 4'], className='card-title'),
                                        html.P(id='card_text_4', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_5', children=['Card Title 5'], className='card-title'),
                                        html.P(id='card_text_5', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_6', children=['Card Title 6'], className='card-title'),
                                        html.P(id='card_text_6', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                    ], style={'height': '90vh','width':'50vh'}),
], style={'height': '100vh', 'width':'100vh'})

Answer 1

我可以通过将dbc.Col放在html.Div中，然后给每个dbc.Col一个CSS style = 'display : inline-block‘来解决这个问题。