如何修复 Bootstrap 堆叠行中的间隙？
- Barbara Streisand原创
- 2024-11-06 06:17:02989浏览
Bootstrap 堆叠行中存在间隙？
创建从较大屏幕尺寸堆叠到较小屏幕尺寸的 Bootstrap 网格时，通常会遇到间隙内容较长的项目会破坏堆叠顺序。以下是解决此问题的几种解决方案：
1.设置元素高度：
为投资组合网格中的所有元素分配固定高度。
2.使用 Masonry：
使用 masonry.js 等库，动态调整元素大小以适应可用空间。
3.响应式类和 Clearfix：
如 Bootstrap 文档中“响应式列重置”下所述，使用响应式类并在网格中的每个元素后面添加一个带有“clearfix”类的 div 以防止出现间隙。
4。 jQuery 高度调整：
使用 jQuery 根据网格内的最大高度动态调整列的高度。
使用响应式类和 Clearfix 方法的示例：
为网格中的每个元素添加一个“clear”类：
`
<div><div>
添加 CSS处理不同的断点：
@media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}以上是如何修复 Bootstrap 堆叠行中的间隙？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn