在应用程序布局中将卡片对齐单行 - 绘图破折号

Question

我正在尝试使用应用程序布局将所有卡片放在同一行中。无论配置如何，一张卡都会下降一排（见下文）。我希望所有 7 张卡片都位于同一行，并保持每张卡片的宽度相同。如果我将宽度减小到 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

检查这是否适合您。卡片尺寸大于 size=1，但略小于 size=2，但适合单行。

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",
                        ),
                        # The card size is bigger than size=1 but slightly smaller than size=2 but fits in single row
                        #### START ####
                        dbc.Row(
                            [
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                                dbc.Col(card),
                            ],
                            justify="center",
                            class_name="g-0",
                        ),
                        #### END ####
                        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)