我想在 Bootstrap 4 列 / 卡中实现此效果:
flexbox 有可能吗?
这是我的源代码,我玩:
https://jsfiddle.net/dandaka/us04p2vg/<div cl="container">
<div cl="row">
<div cl="col">
<div cl="img-top"><img src="https://placeld.it/350x100" alt="" cl="img-fluid"></div>
<div cl="text-bottom">Lorem ipsum</div>
</div>
<div cl="col">
<div cl="img-top"><img src="https://placeld.it/350x50" alt="" cl="img-fluid"></div>
<div cl="text-bottom">Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt</div>
</div>
<div cl="col">
<div cl="img-top"><img src="https://placeld.it/350x250" alt="" cl="img-fluid"></div>
<div cl="text-bottom">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
我曾想过以下解决方案:
对图像和文本使用多行。在小断点中堆叠时将工作不良。并且整个卡应该具有悬停状态,当在 2 行中断开时将工作不良。
使用 Bootstrap 卡。它们似乎只适用于固定高度的图像。
在 flexbox 中使用基线对齐。找不到任何示例,其中两个元素从一个轴在不同方向上增长。
修复文本块高度(以像素为单位)。根本不是解决方案,只是一种解决方法。
想不出别的了。
一种方法是在顶部图像和下部文本上设置% 高度。然后使用 flexbox 相应地对齐项目..
<div cl="row align-items-baseline">
<div cl="col">
<div cl="img-top d-flex h-50"><img src="https://placeld.it/350x100" alt="" cl="align-self-end img-fluid"></div>
<div cl="text-bottom p-3 h-50">Lorem ipsum her eis some more text</div>
</div>
<div cl="col">
<div cl="img-top d-flex h-50"><img src="https://placeld.it/350x50" alt="" cl="align-self-end img-fluid"></div>
<div cl="text-bottom p-3 h-50">Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt</div>
</div>
<div cl="col">
<div cl="img-top d-flex h-50"><img src="https://placeld.it/350x250" alt="" cl="align-self-end img-fluid"></div>
<div cl="text-bottom p-3 h-50">Lorem ipsum dolor sit amet</div>
</div>
</div>
http://www.codeply.com/go/vc8Mk2Rjm0
我使用 50 / 50,因为它包含在 BS4 中,但是您可以自定义顶部 / 底部的比例。
.h-40 {
height: 40%;
}
.h-60 {
height: 60%;
}
http://www.codeply.com/go/whe449Ixtx
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(76条)