引导4-在右边有一个大列的2列
引导4-在右边有一个大列的2列
提问于 2018-08-27 15:59:44
我正在尝试使用引导程序4(也许还可以使用flexbox )来实现以下功能：
小屏幕：
| | |
| 1 | 2 |
| | |
|______________________________|
| |
| |
| 3 |
| |大屏幕：
| | |
| 1 | |
| | |
|_________________| 2 |
| | |
| | |
| 3 | |
| | |到目前为止我所拥有的：https://jsfiddle.net/aq9Laaew/180926/
我试着玩顺序-*和排列-自我拉伸，但他们没有给出预期的结果。(我在找类似行跨度的东西)
可能很重要的额外细节：
第2列的高度在小屏幕上为68 up，在较大屏幕上为140 up(较大屏幕的断点为992 up及以上)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-27 16:09:40
我在这里回答了一个类似的问题：
How to fix unexpected column order in bootstrap 4?
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
您需要重写行中的挠曲盒，以使较高的列向右浮动。这可以使用行上的d-md-block和列上的float-*来完成。
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left">
1 of 3
</div>
<div class="col-3 border taller float-right">
2 of 3
</div>
<div class="col-12 col-md-9 border">
3 of 3
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52043047
复制相关文章
相似问题
腾讯云开发者
