Bootstrap v5 Grid 在“col-lg”情况下不起作用答案

【问题标题】：Bootstrap v5 Grid is not working in "col-lg" caseBootstrap v5 Grid 在“col-lg”情况下不起作用
【发布时间】：2021-09-16 16:21:08
【问题描述】：

我正在学习 bootstrap，并且看到一门专注于 Bootstrap 4 的课程。我不确定以下内容是否与此有关，但我无法完成此练习。

我正在为大屏幕制作这个网格：

当屏幕尺寸缩小到中等时，网格现在应该是这样的：

最后，短屏幕尺寸的屏幕应该是这样的：

我尝试了以下代码，但最大尺寸没有成功：

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        div[class^="col"] {
            height: 100px;
            background: #fdca6d;
            border: 1px solid white;
        }
    </style>
    <title>Grid challenge 2</title>
  </head>
  <body>
    <div class="container mt-4">
        <!--Start first row-->
        <div class="row">
            <div class="col-6 col-md-3">
                Row 1 / Col 1
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 2
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 3
            </div>
            <div class="col-6 col-md-3">
                Row 1 / Col 4
            </div>
        </div>
        <!--End first row-->
        <!--Start second row-->
        <div class="row">
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 1
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 2
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 3
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 4
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 5
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 6
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 7
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 8
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 9
            </div>
            <div class="col-12 col-md-6 col-lg">
                Row 2 / Col 10
            </div>
        </div>
        <!--End second row-->
    </div>

    <!--Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

这对我来说是这样的：

【问题讨论】：

感谢您的回答。在您的 codeply 代码中，它可以完美运行，但通过 codepen codepen.io/BlancaMorillo/pen/NWjxQQE 对我不起作用。这可能与我称之为引导程序的行有关吗？因为它们在容器内容方面是相同的。

标签： bootstrap-5 bootstrap-grid

【解决方案1】：

Bootstrap 5.1（2021 年 8 月更新）

Bootstrap 5.1 已发布，自动布局和列大小的错误已得到修复。因此，将自动布局列与大小网格列组合起来现在应该可以按预期工作了。

这里可以看到mix and match columns working as expected

引导 5.0.2

这个is a bug 是在 Bootstrap 5.0.2 中引入的。这是因为生成的自动布局列 col-{bp} 的 CSS 顺序与调整大小的列 col-{bp}-{width} 的顺序相反。在您的情况下，这会使 col-md-6 覆盖 col-lg。

Not working in 5.0.2

Working in 5.0.1

正如您在 Github 线程 https://github.com/twbs/bootstrap/issues/34335 中看到的，有一个针对下一个 5.1.x 版本的修复建议。

【讨论】：

【解决方案2】：

如果您希望在大型显示器及以上显示 10 列，您可以使用 row-cols 并为 10 列定义自定义样式，如下所示：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<style>
    div[class^="col"] {
        height: 100px;
        background: #fdca6d;
        border: 1px solid white;
    }

    @media (min-width:992px) {
        .row-cols-lg-10 > * {
            flex: 0 0 auto;
            width: 10%;
        }
    }
</style>

<div class="container mt-4">
    <!--Start first row-->
    <div class="row">
        <div class="col-6 col-md-3">
            Row 1 / Col 1
        </div>
        <div class="col-6 col-md-3">
            Row 1 / Col 2
        </div>
        <div class="col-6 col-md-3">
            Row 1 / Col 3
        </div>
        <div class="col-6 col-md-3">
            Row 1 / Col 4
        </div>
    </div>
    <!--End first row-->
    <!--Start second row-->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-10">
        <div class="col">
            Row 2 / Col 1
        </div>
        <div class="col">
            Row 2 / Col 2
        </div>
        <div class="col">
            Row 2 / Col 3
        </div>
        <div class="col">
            Row 2 / Col 4
        </div>
        <div class="col">
            Row 2 / Col 5
        </div>
        <div class="col">
            Row 2 / Col 6
        </div>
        <div class="col">
            Row 2 / Col 7
        </div>
        <div class="col">
            Row 2 / Col 8
        </div>
        <div class="col">
            Row 2 / Col 9
        </div>
        <div class="col">
            Row 2 / Col 10
        </div>
    </div>
    <!--End second row-->
</div>

【讨论】：