Plotly Dash：使用Dash Bootstrap动态构建网格布局及卡片堆叠问题咨询

问题根因 #

你当前的代码存在3个核心问题导致卡片垂直堆叠：

1. 语法错误：首个Row内的dbc.Col括号闭合错误，width参数没有正确传入dbc.Col组件
2. 布局逻辑错误：将所有卡片都塞到同一个width=4的列容器内，自然会按顺序垂直排列，正确逻辑是每个卡片单独作为一个dbc.Col子元素
3. 函数参数错误：create_cards函数要求传入日期对象，但你调用时传的是range生成的整数，会触发strftime属性报错

修复后代码 #

from dash import dash_table, html, dcc
import dash_bootstrap_components as dbc
from datetime import date

# 兼容测试场景的卡片生成函数
def create_cards(date_val):
    # 同时支持传入日期对象或测试用整数
    date_str = date_val.strftime('%Y-%m-%d') if hasattr(date_val, 'strftime') else f"卡片{date_val}"
    return dbc.Card(
         dbc.CardBody(
            [
                html.H4(date_str, id=f"{date_val}-title"),
                html.H2("租金数值", id=f"{date_val}-rent"),
            ]
         ),
        className="mb-3" # 添加底部边距避免卡片贴连
    )

# 网格布局部分修改
target_layout = dbc.Col(
    # 只需一个Row即可，利用Bootstrap 12列栅格规则自动换行
    dbc.Row(
        # 每个卡片单独占4列宽度，一行刚好放下3个，超出自动换行
        [dbc.Col(create_cards(i), width=4) for i in range(5)],
        align='center',
        no_gutters=False # 需要卡片之间留间距设为False，不需要留间距设为True
    ),
    width={"size": 7, "order": "last"}
)

如果你需要调整每行卡片数量，修改width参数即可：每行放2张设width=6，每行放4张设width=3。

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