twitter-bootstrap – 具有可变高度的Bootstrap行元素

发布时间：2020-12-17 21:30:29 所属栏目：安全来源：网络整理

导读：我目前正在使用Twitter Bootstrap开发一个网站. 我的情况：单个.row元素,包含多个可变高度的元素.col-XX-XX(具有可变图像比率的产品图像) 我的设计中的列数从视口大小到视口大小不等,这会禁用我只是通过创建几个.row包装器来分隔元素. 由于元素的个体图像,

我目前正在使用Twitter Bootstrap开发一个网站.

我的情况：
单个.row元素,包含多个可变高度的元素.col-XX-XX(具有可变图像比率的产品图像)

我的设计中的列数从视口大小到视口大小不等,这会禁用我只是通过创建几个.row包装器来分隔元素.

由于元素的个体图像,每个元素具有可变高度.如果大元素在其出现的实际行中首先出现,则可以显示没有元素的大空白区域(标记为红色).

我唯一的解决方案是在列表中设置元素的预定义高度,以确保在显示下一个元素(在新行上)时不会发生“跳跃”.

我也尝试使用javascript,找到元素的最大值,然后将所有元素设置为此高度,但这是一个不好的解决方案,因此大量的图像高度也会创建大的空白区域.

有没有人有一个很好的解决这个问题的方法？

解决方法

在Joseph Casey的帮助下,我找到了解决方案.

CSS：flexbox

使用此链接中说明的样式：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

我使用了以下样式：

CSS

.row{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row .item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

这实现了元素很好地对齐.

最新的浏览器支持这些样式.我在这里找到了flexbox的浏览器支持列表：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

一点注意事项：在Google Chrome 43中,第一行元素将最后一个元素向下移动到下一行(第一行的最后一列为空),但在所有后续行中,所有列都会很好地填充.我还没有找到任何解决方案.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!