Bootstrap v5 网格在“col-lg”情况下不起作用

Question

Bootstrap v5 网格在“col-lg”情况下不起作用

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

Run Code Online (Sandbox Code Playgroud)

这对我来说是这样的：

Answer 1

Zim*_*Zim 5

Bootstrap 5.1（2021 年 8 月更新）

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

在这里您可以看到混合和匹配列按预期工作

引导程序5.0.2

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

在 5.0.2 中不工作

在 5.0.1 中工作

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

归档时间：	5 年，2 月前
查看次数：	6257 次
最近记录：	4 年，9 月前