Bootstrap v5网格在第&lg；个案例中不工作 [英] Bootstrap v5 Grid is not working in "col-lg" case
本文介绍了Bootstrap v5网格在第&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>
在我看来是这样的：
推荐答案
引导5.1(2021年8月更新)
Bootstrap 5.1已发布，修复了自动布局和调整列大小的错误。因此，将自动布局列与调整大小的网格列组合在一起现在应该可以按预期工作。
在这里您可以看到mix and match columns working as expected
Bootstrap 5.0.2
这是在Bootstrap 5.0.2中引入的is a bug。这是因为自动布局列ol-{BP}生成的CSS顺序与大小列ol-{BP}-{宽度}的顺序相反。在您的情况下，这将使col-md-6覆盖col-lg。
正如您在Github线程https://github.com/twbs/bootstrap/issues/34335中看到的，建议对下一个5.1.x版本进行修复。
这篇关于Bootstrap v5网格在第&lg；个案例中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
