在多行上划线引导卡？

Question

所以基本上我的问题是因为使用 dbc 进行布局的方法是通过“第 1 行，第 2 列”是否可以将一个组件拉伸到多行。 显然行大小是自适应的，但我想到的是这样的： 所以我的主要问题是我是否可以在我的应用程序中添加一张横跨多行（中间的垂直行）但仍保持该行的其他列不变的卡片。

编辑：

我设法得到了我想要的布局，但它仍然不是 100% 我想要的。这是相关代码及其外观：

app.layout = html.Div([
    dbc.Row([
        dbc.Card([
            dbc.CardBody([
                html.H2('Dash Tabs component demo')
            ])
        ], className='text-center')
    ]),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component')
                ])
            ], className='text-center'),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ])
                    ], className='text-center')
                ])
            ], className='pt-1')
        ]),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component'),
                    html.H4('Dash Tabs component')
                ])
            ], className='h-100 text-center')
        ]),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component')
                ], className='text-center')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ], className='text-center')
                    ])
                ]),
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component')
                        ], className='text-center')
                    ])
                ])
            ], className='pt-1')
        ])
    ], className='p-2 align-items-stretch'),
    content
])

如您所见，我设法完成了整体布局（尽管代码看起来很丑）。

现在唯一困扰我的是，我无法让卡片具有合适的高度，同时在它们之间保留一点填充，最值得注意的是第一列在底部有更多空间。

我从this dbc cheatsheet 获得了类名，它确实有帮助，但“对齐”和“证明”类名对我来说根本不起作用。

总而言之，我需要将所有卡片在行中“在同一级别”对齐。

Answer 1

不确定我是否正确理解了您的问题，但如果您的目标是始终保持与初始图片中的布局相同，您可以将其定义为最小屏幕尺寸的布局（例如，使用关键字参数 @987654324 @ 用于破折号列，请参阅Specify width for different screen sizes)，这样当您例如调整浏览器窗口的大小。因此，对于您的布局，这意味着：

• 初始行：使用整个宽度
• 第二行：有三列 相同的宽度（最大列跨度为 12，所以如果你想要三个同样宽 列，每列的宽度应为 4 (xs=4)
• 第三列：包含第二行和两列，每列使用第三列宽度的 50%（因此我们将xs=6 用于这两列）

这里稍微说明一下：

这里是一个工作示例：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(external_stylesheets=[dbc.themes.QUARTZ],
                meta_tags=[{'name': 'viewport', 'content': 'width=device-width, ''initial-scale=1'}])

server = app.server
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dbc.Row([
        dbc.Card([
            dbc.CardBody([
                html.H2('Dash Tabs component demo')
            ])
        ], className='text-center')
    ]),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 1')
                ])
            ], className='text-center'),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 2')
                        ])
                    ], className='text-center')
                ])
            ], className='pt-1')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 3'),
                    html.H4('Dash Tabs component 4')
                ])
            ], className='h-100 text-center')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H4('Dash Tabs component 5')
                ], className='text-center')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 6')
                        ], className='text-center')
                    ])
                ], xs=6),
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            html.H4('Dash Tabs component 7')
                        ], className='text-center')
                    ])
                ], xs=6)
            ], className='pt-1')
        ], xs=4)
    ], className='p-2 align-items-stretch'),
    # content
])


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

我也为此苦苦挣扎，不确定这是否是最好的方法。所以，如果其他人有更好的解决方案，我很乐意学习！