我正在学习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
。
Not working in 5.0.2
Working in 5.0.1
正如您在Github线程https://github.com/twbs/bootstrap/issues/34335中看到的,建议对下一个5.1.x版本进行修复。