如何使按钮在所有尺寸的显示器上保持一致？

Question

所附图片是两种不同尺寸（24 英寸和 13 英寸）显示屏上的按钮，24 英寸显示屏上的按钮显示正常，而 13 英寸显示屏上的添加到购物车按钮损坏。13inch display button 24 inch display button

    <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>

Answer 1

欢迎使用 Whosebug。

您可以使用带有断点前缀的col来调整布局。（例如 col-xxl-2 col-3）。阅读 Bootstrap Breakpoints and Grid options 了解更多信息。此外，由于 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>

编辑

不要忘记包含 required meta tags:

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

如何使按钮在所有尺寸的显示器上保持一致？

How to make a button consistent on all size of display?

css

twitter-bootstrap

laravel

bootstrap-5

编辑