如何解决Bootstrap v5 Grid 在“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>
这就是我的样子：
解决方法
如果您想在大型显示器及以上显示 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>Bootstrap 5.1（2021 年 8 月更新）
Bootstrap 5.1 已发布，自动布局和列大小的错误已修复。因此，将自动布局列与调整大小的网格列组合现在应该可以按预期工作。
引导程序 5.0.2
这个 http://www.fpdf.org/ 在 Bootstrap 5.0.2 中引入。这是因为自动布局列 col-{bp} 的生成 CSS 顺序与大小列 col-{bp}-{width} 的顺序相反。在您的情况下，这会使 col-md-6 覆盖 col-lg。
正如您在 Github 主题 Working in 5.0.1 中所见，下一个 5.1.x 版本提出了修复建议。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
