1.bootstrap页面，被分两列
2.在第二列中,有一个div
3.在第二列的div中,放有多个小的div,有固定大小。这些小的div默认并排显示。可根据空间大小，自适应调整为两行或多行显示
<div class="row">
<div class="col-1>
<nav></nav>
</div>
<div class="col-11>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</div>
</div>
分享
关注引自免费微信小程序：皆我百晓生
为了实现您描述的需求，您可以使用Bootstrap的栅格系统以及d-flex和flex-wrap类来让子元素自动换行。以下是修改后的HTML结构及CSS样式，这将使子div根据屏幕宽度自适应排列。
首先，在HTML中添加一个包含所有小div的容器，并给这个容器加上.container-flex的类名，用于应用CSS样式。同时，确保每个小div都有一个固定的宽度，这里我们设置为 calc(100% / 5)来平均分配空间。如果需要更精确的宽度控制，可以使用百分比或其他单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.container-flex {
display: flex;
flex-wrap: wrap;
}
.small-div {
width: calc(100% / 5);
box-sizing: border-box;
padding: 10px;
background-color: #f5f5f5;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-1">
<nav></nav>
</div>
<div class="col-11">
<div class="container-flex">
<div class="small-div">div1</div>
<div class="small-div">div2</div>
<div class="small-div">div3</div>
<div class="small-div">div4</div>
<div class="small-div">div5</div>
<!-- Add more small divs as needed -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
这段代码会在浏览器中创建一个两列布局，左侧一列是导航栏，右侧一列包含一个名为.container-flex的灵活容器，其中包含了五个.small-div的小div。当屏幕宽度减小时，这些小div会自动换行，始终保持均匀分布。如果您想更改换行时的列数，可以通过修改.small-div的宽度（例如改为calc(100% / 3)）来实现。
注意：我已经提供了完整的HTML、CSS和所需Bootstrap库的CDN链接。将这段代码复制到一个新的HTML文件中，然后在浏览器中打开，就能看到效果了。
分享
系统已结题
5月28日
已采纳回答
5月20日
创建了问题
5月20日
