如何使按鈕在所有尺寸的顯示幕上保持一致？

附圖是兩種不同尺寸（24 英寸和 13 英寸）顯示幕上的按鈕，24 英寸顯示幕上的按鈕顯示正常，而 13 英寸顯示幕上的添加到購物車按鈕損壞。13英寸顯示按鈕 24英寸顯示按鈕

    <div class="row my-5" id="3">
            <span id="lblArtworkId" style="display: none;">3</span>
            <div class="col-2">
                <div class="d-flex justify-content-center">
                    <a href="./">
                        <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                    </a>
                </div>
            </div>
            <div class="col-6">
                <div class="h-100 d-flex flex-column justify-content-between">
                    <span>
                        <a href="./" class="text-decoration-none text-muted fs-4">
                            Construction in Red, Blue & Yellow Drawing
                        </a>
                    </span>
                    <hr>
                    <p class="m-0">Artist: Karin White</p>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-center">
                    <span class="fw-bold">$ 1120.00</span>
                </div>
            </div>
            <div class="col-2">
                <div class="h-100 d-flex align-items-center justify-content-between">
                    <button id="btnRemove" class="btn btn-outline-danger">Remove</button>
                    <button id="btnCart" class="btn btn-primary">Add to Cart</button>
                </div>
            </div>
        </div>

uj5u.com熱心網友回復：

也許是因為您的網頁沒有回應？您可以嘗試調整按鈕的大小以獲得證明。

uj5u.com熱心網友回復：

歡迎來到stackoverflow。

您可以使用col帶有斷點前綴的 s 來調整布局。（例如col-xxl-2 col-3）。閱讀引導斷點和網格選項了解更多資訊。此外，由于 Bootstrap 對像素很敏感，因此考慮像素而不是英寸要好得多。

例子：

<div class="container">

    <div class="row my-5" id="3">
        <span id="lblArtworkId" style="display: none;">3</span>
        <div class="col-xxl-2 col-3">
            <div class="d-flex justify-content-center">
                <a href="./">
                    <img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
                </a>
            </div>
        </div>
        <div class="col-xxl-6 col-9">
            <div class="h-100 d-flex flex-column justify-content-between">
                <span>
                    <a href="./" class="text-decoration-none text-muted fs-4">
                        Construction in Red, Blue & Yellow Drawing
                    </a>
                </span>
                <hr>
                <p class="m-0">Artist: Karin White</p>
            </div>
        </div>
        <div class="col-xxl-2 col-4">
            <div class="h-100 d-flex align-items-center justify-content-center">
                <span class="fw-bold">$ 1120.00</span>
            </div>
        </div>
        <div class="col-xxl-2 col-8">
            <div class="h-100 d-flex align-items-center justify-content-between">
                <button id="btnRemove" class="btn btn-outline-danger w-50 mx-1">Remove</button>
                <button id="btnCart" class="btn btn-primary w-50 mx-1">Add to Cart</button>
            </div>
        </div>
    </div>

</div>

uj5u.com熱心網友回復：

嘗試將按鈕放在下面的 Div 中，這將使按鈕在大螢屏上以合理的大小出現在每個按鈕旁邊，但在全屏寬度上并在小螢屏上堆疊在一起。您還可以使用 CSSfont-size在較小的螢屏上提升按鈕，以制作整體較大的按鈕。

<div class="d-grid gap-2 d-md-block">
   <!-- Your Buttons -->
</div>

甚至嘗試取出gap-2并看看它的樣子。

標籤：css 拉拉维尔 推特引导 引导程序 5

上一篇：自動創建gitlab專案并推送到存盤庫

下一篇：如何將內容分配到中心？