如何让Dash中dmc.Card实现与dbc.Card一致的响应式布局？

问题描述 #

在Dash应用中使用dmc.Card组件时，配置了base/sm/md/lg等响应式固定宽度参数，但希望达到和dbc.Card相同的响应效果：屏幕缩小时卡片保持同行布局，仅宽度自适应缩小，不会拆分到单独行。

问题原因 #

当前dmc.Card设置了固定像素宽度，当屏幕宽度不足以容纳所有卡片的固定宽度总和时，Bootstrap栅格布局会自动换行。而dbc.Card默认继承父容器宽度，配合栅格的弹性布局实现自适应不换行。

解决方案 #

1. 移除dmc.Card的固定宽度w参数，改用自适应宽度，让卡片继承父dbc.Col的宽度
2. 给包裹卡片的dbc.Row添加className="flex-nowrap flex-fill"，强制行内元素不换行并填充可用空间
3. 保持卡片固定高度h，确保布局一致性

修改后的完整代码 #

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

external_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

carddbc = dbc.Card(
    [dbc.CardBody([html.P('', className='card-text')])],
    style={'height': '100%'}
)

# 修改后的dmc.Card：移除固定w参数，强制宽度占满父容器
card1 = dmc.Card(
    html.Div([dcc.Checklist(['', '', '', '', ''])]),
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
    style={"width": "100%"}
)

card2 = dmc.Card(
    html.Div([dcc.Checklist(['', '', '', '', ''])]),
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
    style={"width": "100%"}
)

card3 = dmc.Card(
    html.Div([dcc.Checklist(['', '', '', '', ''])]),
    py={"base": "xs", "sm": "md", "lg": "xl"},
    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},
    withBorder=True,
    shadow='sm',
    radius='md',
    h=275,
    style={"width": "100%"}
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([], xs=2, sm=2, md=2, lg=2),
        dbc.Col([
            dbc.Row([
                dbc.Col(carddbc, width={'size': 3}),
                dbc.Col(carddbc, width={'size': 3}),
                dbc.Col(carddbc, width={'size': 3}),
            ], justify='center'),
            dbc.Row([
                dbc.Col([], xs=4, sm=4, md=4, lg=4),
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            dbc.Row([
                                dbc.Col([dcc.Graph()]),
                                # 关键：添加flex-nowrap强制不换行，flex-fill让卡片平分空间
                                dbc.Row([
                                    dbc.Col(html.Div(card1), className='flex-fill'),
                                    dbc.Col(html.Div(card2), className='flex-fill'),
                                    dbc.Col(html.Div(card3), className='flex-fill'),
                                ], className='flex-nowrap flex-fill')
                            ])
                        ])
                    ])
                ], xs=8, sm=8, md=8, lg=8),
            ])
        ], xs=10, sm=10, md=10, lg=10)
    ])
], fluid=True)

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

关键改动说明 #

• 每个dmc.Card添加style={"width": "100%"}，确保卡片占满父dbc.Col宽度
• 包裹卡片的dbc.Row添加className="flex-nowrap flex-fill"：
  • flex-nowrap：强制行内元素不换行
  • flex-fill：让每个dbc.Col平分可用空间
• 移除dmc.Card的固定w参数，避免固定宽度触发换行逻辑

内容的提问来源于stack exchange，提问作者jonboy