Bootstrap 3网格列的高度相同
凯文·H
我有的
我有一些具有不同高度的Bootstrap 3 Grid列：
<div class="row">
<div class="col-xs-4">Item 1</div>
<div class="col-xs-4">Item 2 <br/> additional line
</div>
<div class="col-xs-4">Item 3</div>
<div class="col-xs-6">Item 4 - This should be on a separate line</div>
</div>
看起来像这样：
我想要的是
我想添加一个额外的类（例如.row-aligned）.row来实现所有并列的“ cols”都具有相同的高度。
看起来应该像这样：
我的尝试
因为我不需要支持旧的浏览器，所以可以使用flexbox。我的尝试非常简单，可以在所有浏览器中使用，但不能在Safari（9.1版，Mac OSX 10.10）中使用：
.aligned-row {
display: flex;
flex-flow: row wrap;
}
Safari错误
就像我说的，Safari无法处理这种flexbox样式，结果如下所示：
（我发现添加margin-left: -1px似乎可以解决此问题，但这不是一个好的解决方案，因为它将所有内容向左移动1个像素，这可能会隐藏边框或其他内容。）
我的问题
您是否知道如何在Safari中修复此错误？还是我使用flexbox错误？还是在不使用flexbox的情况下有更好的解决方案？
凯文·H
解决方案是“删除”display: table设置为.row::before：
.aligned-row {
display: flex;
flex-flow: row wrap;
&::before {
display: block;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Bootstrap 3网格列的高度相同
- 2
Bootstrap 4网格列合并
- 3
Bootstrap 3网格大小
- 4
Bootstrap 3网格系统
- 5
Bootstrap 3网格对齐问题
- 6
Bootstrap 3网格轮播
- 7
如果元素以不同的高度和宽度平铺，如何使用Bootstrap 3网格
- 8
Bootstrap 4.5网格
- 9
每个项目中具有不同高度的Bootstrap 3网格-仅使用CSS即可解决吗？
- 10
适用于巨型机头的Bootstrap 3网格列
- 11
Bootstrap 3网格：一排内的一列
- 12
Bootstrap 3网格布局动态生成的列未清除正确
- 13
Bootstrap 3网格：在行之间移动元素
- 14
Bootstrap 3网格可以扩展吗？
- 15
在bootstrap 3网格中排列图像
- 16
如何使用bootstrap3网格系统
- 17
Bootstrap 3网格无法在移动设备上扩展
- 18
如何使用bootstrap3网格系统
- 19
请说明Twitter Bootstrap 3网格系统
- 20
Bootstrap 3网格：在行之间移动元素
- 21
Bootstrap 3网格切换行
- 22
Bootstrap 3网格无法在移动设备上扩展
- 23
Bootstrap 3网格问题Firefox未对准
- 24
我是否应用了bootstrap 3网格系统？
- 25
bootstrap 3网格不是并排而是在下面
- 26
如何正确使用Bootstrap 3网格属性
- 27
bootstrap 3网格系统无法正常工作
- 28
如何管理Bootstrap 4网格？
- 29
如何使用bootstrap 3网格系统设计自定义网格？
我来说两句