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

问题描述 投票：0回答：1

所附图片是两种不同尺寸（24英寸和13英寸）显示屏上的按钮，24英寸显示屏上的按钮显示正常，而13英寸显示屏上的添加到购物车按钮损坏。13inch display button24 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>
css laravel twitter-bootstrap bootstrap-5
1个回答
0
投票

您可以使用带有断点前缀的

col
来调整布局。 （例如
col-xxl-2 col-3
）。请阅读 Bootstrap Breakpoints 和 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>

不要忘记包含所需的元标记：

<head>

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

</head>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.