如何在Python Dash中对齐dbc.Card与html.Small元素？

需要将消息框（dbc.Card）下方的“Last updated 3 mins ago”（html.Small元素）右对齐，使其与上方的消息框右侧对齐。尝试过放入单个/多个dbc.Col均未成功，以下是最小复现代码及效果：

import dash
import dash_bootstrap_components as dbc
from dash import html


def render_textbox(text: str):
    
    style = {
        "max-width": "70%",
        "width": "max-content",
        "padding": "5px 10px",
        "border-radius": 30,
        "margin-bottom": 30,
        "border": "1px solid",
        "margin-left": "auto",
        "margin-right": 0
    }

    textbox = dbc.CardBody(
        [
            dbc.Col(
                [
                    dbc.Card(text, style=style, body=True, color="primary", inverse=True),
                    html.Small(
                        "Last updated 3 mins ago",
                        className="card-text text-muted",
                    ),
                ],
            )
        ]
    )

    return html.Div([textbox])


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    render_textbox("Hello there!"),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server()

（效果截图：消息时间未对齐的效果）

核心问题是当前html.Small元素默认左对齐，且未与上方卡片的对齐逻辑绑定。修改方案如下：

修改后的完整代码 #

import dash
import dash_bootstrap_components as dbc
from dash import html


def render_textbox(text: str):
    
    card_style = {
        "max-width": "70%",
        "width": "max-content",
        "padding": "5px 10px",
        "border-radius": 30,
        "margin-bottom": 8,  # 缩小卡片与时间的间距
        "border": "1px solid",
    }

    # 用右对齐容器包裹卡片和时间，确保整体对齐逻辑统一
    textbox = html.Div(
        [
            dbc.Card(text, style=card_style, body=True, color="primary", inverse=True),
            html.Small(
                "Last updated 3 mins ago",
                className="card-text text-muted text-end",  # Bootstrap右对齐类
            ),
        ],
        style={"margin-left": "auto", "margin-right": 0, "max-width": "70%"}  # 控制容器右对齐及最大宽度
    )

    return textbox


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    render_textbox("Hello there!"),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server()

关键修改点 #

• 移除冗余的dbc.CardBody和dbc.Col嵌套，改用普通html.Div作为容器，简化层级；
• 给外层容器添加margin-left: auto实现整体右对齐，同时设置与卡片一致的max-width；
• 给html.Small添加Bootstrap内置的text-end类，直接实现文本右对齐；
• 调整卡片的margin-bottom，优化时间与卡片的间距。

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