引自免费微信小程序:皆我百晓生
为了实现您描述的需求,您可以使用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文件中,然后在浏览器中打开,就能看到效果了。