将单行中的 dbc.card 与应用程序布局对齐 -plotly dash

Question

我正在尝试使用应用程序布局将所有卡片放在同一行中。无论配置如何，一张卡都会下降一排。我希望所有卡片都位于同一行并保持相同的宽度。如果我将宽度减小到 1，卡片就会太小而无法显示任何有意义的信息。

有没有办法增加布局的总大小？

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets = external_stylesheets)


filter_box = html.Div(children=[

        html.Div(children=[
            dcc.Checklist(
                options = [
                ],
                style = {'display': 'inline-block','margin':'0.1rem'}
            ),       

        ], className = "vstack gap-1 h-100",            
        )
    ])

card = dbc.Card(
    [
        dbc.CardHeader('card', className = 'lead', style = {'fontSize': 10}),
        dbc.CardBody(
            [
                html.P('', className = 'card-text'),
                html.H4(id = '', className = 'text-center align-self-bottom'),
            ]
        ),
    ], className = 'border border-3 text-center m-2 mw-10',
    style={'height':'75%', 'fontSize': 10, 'marginTop': '0'}
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Row([
                dbc.Col(html.Div(filter_box), 
                        ),
            ]),
        ], xs = 3, sm = 3, md = 3, lg = 3
        ),
        dbc.Col([
            dbc.Row([
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
                dbc.Col(card, width = {'size':2}
                        ),
            ], justify = 'center'),
            dbc.Row([
                dbc.Col([
                dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dcc.Graph(id = ''),
                        ]), 
                        ]),
                    ]),
                ], xs = 4, sm = 4, md = 4, lg = 4),
                dbc.Col([
                    dbc.Card([
                    dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id = '')
                            ], 
                            ),
                        ]),
                    ], style = {'padding-top': '20px'},
                    )
                    ])
                ], xs = 8, sm = 8, md = 8, lg = 8),
            ])
        ], xs = 9, sm = 9, md = 9, lg = 9)
    ])
], fluid = True)


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

Answer 1

哇，这是个好主意。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa