提问人:Kasia 提问时间:9/15/2023 更新时间:9/15/2023 访问量:39
Bootstrap 5:两列布局,文本应围绕图像流动
bootstrap 5: two column layout, text should flow around image
问:
我只是找不到解决方案。我想在一行中实现两列;左列中有一个图像(MD-3 或 LG-4),右列中有一个长文本(MD-9 或 LG-8)。
当我在图像的末尾时,我希望文本以完整的网格宽度 (12) 围绕图像流动。如图所示:(https://i.stack.imgur.com/bilXe.jpg)
<div class="row">
<div class="col-md-3 col-lg-4">IMAGE</div>
<div class="col-md-9 col-lg-8">TEXT</div>
</div>
我正在使用 Bootstrap 5。我不想添加任何额外的 HTML,而只是插入正确的 bootstrap 5 类,使之成为可能。
到目前为止,我已经尝试了 float-start / float-end、order-lg-1 / order lg-2 但没有成功。是哪一排?它必须是 D-Flex 吗?不幸的是,我没有这方面的经验。
答:
0赞
Kasia
9/15/2023
#1
溶液:
删除行
删除第 2 个分区的网格宽度
将 float-none 添加到第二个 div
将 float-start 添加到第一个 div
<div class="float-start col-md-3 col-lg-4">IMAGE</div> <div class="float-none">TEXT</div>
评论