Bootstrap v5 网格在 "col-lg" 情况下不工作

Question

我正在学习 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>

这就是我的样子：

Answer 1

如果您想要在大型显示器或更大的显示器上显示 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>

Answer 2

Bootstrap 5.1（2021 年 8 月更新）

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

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

Bootstrap 5.0.2

此 is a bug 在 Bootstrap 5.0.2 中引入。这是因为生成的 CSS 自动布局列 col-{bp} 的顺序与大小列 col-{bp} 的顺序相反-{宽度}。在您的情况下，这会使 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 版本的建议修复。

Bootstrap v5 网格在 "col-lg" 情况下不工作

Bootstrap v5 Grid is not working in "col-lg" case

bootstrap-5

bootstrap-grid