html - 在 Bootstrap 中均匀分布嵌套的行/列?
问题描述
我正在尝试创建一种表格,其中我有嵌套的行和列,并希望每个项目均匀分布。我正在努力添加添加更多行的功能(并且在这样做时,行应该自动均匀分布自己)。
我试图弄清楚如何均匀分布每个项目,以使每一行的大小相同,即使缺少列或缺少图片也是如此。
body, head {
width: 100%;
height: 100%;
}
div {
padding: 1em;
border: 1px dotted black;
}
img {
height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="main">
<div class="row d-flex flex-row">
<div class="col d-flex flex-column justify-content-center">
<div class="inner-row d-flex justify-content-center">
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
</div>
</div>
<div class="col d-flex flex-column justify-content-center">
<div class="inner-row d-flex justify-content-center">
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
</div>
</div>
</div>
<div class="row d-flex flex-row">
<div class="col d-flex flex-column justify-content-center">
<div class="inner-row d-flex justify-content-center">
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
<div class="item">
<img src="https://source.unsplash.com/300x300"/>
</div>
</div>
</div>
<div class="col d-flex flex-column justify-content-center">
<div class="inner-row d-flex justify-content-center">
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- python - 如何对我的 python 文件执行“python_file.py -something”?不知道如何措辞以找到涵盖它的帖子
- c++ - 有人可以解释为什么这段代码的输出是 3 而不是 4?
- javascript - Angular rxjs debounce 以限制用户发送多个请求
- javascript - 如何从 Rails 6 视图调用 JavaScript 函数
- rspec - Accept a screen share pop up
- c# - 升级到 .Net-Core 3.1 会导致经过身份验证的控制器达到 404
- python - 如果列表在 X 范围内,如何获取列表中的连续数字序列
- java - 限制有界类型参数 A和 A
- c# - 根据数据库值更改树视图节点的背景颜色
- scala - 在 scala 的集合中查找方法