我正在嘗試這樣對齊1個標題和2個按鈕:

在手機上: 標題:居中，一排 按鈕1和按鈕2:寬度100%，一個在另一個上面 在此輸入圖像描述

現在看起來像是: 在此輸入圖像描述

在桌面上: 標題:對 按鈕1和按鈕2小

現在看起來像: 在此輸入圖像描述

我正在使用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>

謝謝你。

請像他一樣試試，應該管用:

<div class="container-fluid p-0 m-0">
              <div class="row justify-content-between align-items-center">
                <div class="col-sm-6 d-flex">
                  <h2 class="card-title fw-bold">Calendar (<i>not connected to google</i>)</h2>
                </div>

                <div class="col-sm-6 d-flex flex-column flex-sm-row justify-content-sm-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>

您將對大設備使用flex-direction行，對小設備使用flex-direction:列。 您將對普通行和包含按鈕的列使用此規則。 對于行，我們還將使用justify-content-between來提供預期的水平對齊，并使用align-items-center來進行垂直對齊。