文章/答案/技术大牛

发布

社区首页 >问答首页 >引导网格不以动态调整大小为中心

问引导网格不以动态调整大小为中心
EN

Stack Overflow用户

提问于 2021-05-31 04:18:40

回答 2查看 45关注 0票数 0

我正在尝试创建一个bootstrap商店网站。我正在为我的产品创建一个网格。我的两个主要问题是，当屏幕尺寸变小时，网格单元的数量不会改变。当它真的很小的时候，我希望它有1行，否则有2行。我的另一个问题是网格不在屏幕上居中。有人知道怎么做吗？谢谢!

数字是列中的内容。

下面是我的代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ryan's Cookies</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/styles.css" rel="stylesheet">
        
    </head>
    <body class="bg-light">
        <!--Shopping cart-->
        <img src="/static/images/cart.png" class="top-right" alt="cart">

        <!--Main Title-->
        <div class="container text-center title-container">
            <h1 class="display-1">Ryan's Cookie Store</h1>
            <h1 class="display-6"><em>Fresh. Delicious. Delivered</em></h1>
        </div>

        <!--Cookie Grid-->

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-4">
                    <figure class="figure">
                        <img src="/static/images/chocolate-chip.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
                <div class="col-4">
                    <figure class="figure">
                        <img src="/static/images/peanut-butter.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4">
                    <figure class="figure text-center">
                        <img src="/static/images/nieman-marcus.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50$ <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
                <div class="col-4">
                    <figure class="figure text-center">
                        <img src="/static/images/snickerdoodle.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4">
                    <figure class="figure text-center">
                        <img src="/static/images/tiger.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

html

css

bootstrap-5

回答 2

Stack Overflow用户

发布于 2021-05-31 04:31:18

当它真的很小的时候，我希望它有1行，否则是2行。

。

col-4在任何时候都提供3列。使用col-sm-6在sm及以上位置有2列(默认值为1)，或使用col-md-6在md及以上位置有2列(默认值为1)。

请注意，这些也可以组合在一起，例如，class="col-sm-6 col-md-4"在sm处给出2列，在md和更高处给出3列。

网格不在屏幕上居中。

它实际上居中，但看起来有点偏离中心，因为块是左对齐的。您可以在添加col-md-6的同时添加text-center。

<div class="col-md-6 text-center">

完整代码段：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ryan's Cookies</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/styles.css" rel="stylesheet">
    </head>
    <body class="bg-light">
        <!--Shopping cart-->
        <img src="/static/images/cart.png" class="top-right" alt="cart">

        <!--Main Title-->
        <div class="container text-center title-container">
            <h1 class="display-1">Ryan's Cookie Store</h1>
            <h1 class="display-6"><em>Fresh. Delicious. Delivered</em></h1>
        </div>

        <!--Cookie Grid-->
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center">
                    <figure class="figure">
                        <img src="/static/images/chocolate-chip.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
                <div class="col-md-6 text-center">
                    <figure class="figure">
                        <img src="/static/images/peanut-butter.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 text-center">
                    <figure class="figure text-center">
                        <img src="/static/images/nieman-marcus.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50$ <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
                <div class="col-md-6 text-center">
                    <figure class="figure text-center">
                        <img src="/static/images/snickerdoodle.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 text-center">
                    <figure class="figure text-center">
                        <img src="/static/images/tiger.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                    </figure>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

票数 1

Stack Overflow用户

发布于 2021-05-31 06:29:04

在查看时发现的几个细节可能没有考虑在内。我希望这有助于第一个答案，并且是有价值的：

codepen sample

给列元素一个初始类( col -12)将决定屏幕上最大宽度为575.98px的列的数量，这被认为是超小。

添加了断点类的下一个类(col sm-6)将确定最小宽度为576px的列的数量，这被认为是、小等等。

下面是bootstrap的断点片段：

    /* Extra small devices col-* (portrait phones, less than 576px) */
    @media (max-width: 575.98px) { ... }
    
    /* Small devices col-sm-* (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767.98px) { ... }
    
    /* Medium devices col-md-* (tablets, 768px and up) */
    @media (min-width: 768px) and (max-width: 991.98px) { ... }
    
    /* Large devices col-lg-* (desktops, 992px and up) */
    @media (min-width: 992px) and (max-width: 1199.98px) { ... }
    
    /* Extra large devices col-xl-* (large desktops, 1200px and up) */
    @media (min-width: 1200px) { ... }

下面是我在bootstrap中修改的内容，以匹配我所理解的正确内容：

请注意:一个行最多可以容纳12列代码(所以我删除了多余的行)，并且"justify-content-center“类用于flex containers，当文本中心类位于父容器<>e217>上时，似乎不是必需的。我还添加了container-fluid和px-0以使列扩展为全宽。此外，行上的no- gutters 类允许您指定没有间距的填充，这在被误解时可能会导致溢出问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CodePen - A Pen by Lancelot Pierre Blaine</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container-fluid px-0 text-center">
        <div class="row">
            <div class="col-12 col-sm-6">
                <figure class="figure">
                    <img src="/static/images/chocolate-chip.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                    <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                </figure>
            </div>
            <div class="col-12 col-sm-6">
                <figure class="figure">
                    <img src="/static/images/peanut-butter.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                    <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                </figure>
            </div>

            <div class="col-12 col-sm-6">
                <figure class="figure text-center">
                    <img src="/static/images/nieman-marcus.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                    <figcaption class="figure-caption text-right display-8 mt-1">$7.50$ <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                </figure>
            </div>
            <div class="col-12 col-sm-6">
                <figure class="figure text-center">
                    <img src="/static/images/snickerdoodle.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                    <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                </figure>
            </div>

            <div class="col-12 col-sm-6">
                <figure class="figure text-center">
                    <img src="/static/images/tiger.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                    <figcaption class="figure-caption text-right display-8 mt-1">$7.50 <button class="btn btn-dark btn-sm sub-margin">Add To Cart</button></figcaption>
                </figure>
            </div>
        </div>
    </div>
    <!-- partial -->

</body>

</html>

如果这有什么用，请告诉我。

谢谢!

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67765468

复制

相似问题

问引导网格不以动态调整大小为中心
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导网格不以动态调整大小为中心EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导网格不以动态调整大小为中心
EN