如何用Bootstrap 5在移动端与桌面端实现标题和按钮对齐

• 移动端：标题居中独占一行；两个按钮宽度100%，上下排列
• 桌面端：标题居右；两个按钮为小尺寸
• 当前使用Bootstrap 5.3，现有代码如下：

<div class="container-fluid p-0 m-0">
    <div class="row ">
        <div class="col-6 col-xs-12 ">
            <h2 class="card-title fw-bold">Calendar (<i>not connected to google</i>)</h2>
        </div>

        <div class="col-6 col-xs-12 d-flex justify-content-end">
            <button class="btn btn-flex btn-primary btn-block" data-kt-calendar="connect_to_google">
            <i class="ki-double-arrow-back fs-2"></i>Connect to Google</button>

            <button class="btn btn-flex btn-primary btn-blockt" data-kt-calendar="add">
            <i class="ki-duotone ki-plus fs-2"></i>Add Event</button>
        </div>
    </div>
</div>

基于Bootstrap 5.3的响应式工具类，调整代码如下：

<div class="container-fluid p-0 m-0">
    <div class="row align-items-center">
        <!-- 标题：移动端居中占整行，桌面端占6列居右 -->
        <div class="col-12 col-md-6 text-center text-md-end">
            <h2 class="card-title fw-bold">Calendar (<i>not connected to google</i>)</h2>
        </div>

        <!-- 按钮容器：移动端垂直排列+按钮满宽，桌面端横向排列+按钮自适应宽度 -->
        <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-end gap-2">
            <button class="btn btn-flex btn-primary w-100 w-md-auto" data-kt-calendar="connect_to_google">
                <i class="ki-double-arrow-back fs-2"></i>Connect to Google
            </button>

            <button class="btn btn-flex btn-primary w-100 w-md-auto" data-kt-calendar="add">
                <i class="ki-duotone ki-plus fs-2"></i>Add Event
            </button>
        </div>
    </div>
</div>

关键调整说明： #

• 栅格适配：用col-12 col-md-6替代原col-6 col-xs-12，Bootstrap 5已取消xs前缀，默认覆盖移动端
• 文本对齐：text-center text-md-end实现移动端标题居中，桌面端标题居右
• 按钮排列：flex-column flex-md-row让按钮在移动端垂直排列，桌面端横向排列；gap-2控制按钮间距
• 按钮宽度：w-100 w-md-auto实现移动端按钮占满宽度，桌面端按钮自适应内容大小
• 修正错误：将原按钮的btn-blockt拼写错误改为正确样式类

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