Bootstrap 5:两列布局,文本应围绕图像流动

bootstrap 5: two column layout, text should flow around image

提问人:Kasia 提问时间:9/15/2023 更新时间:9/15/2023 访问量:39

问:

我只是找不到解决方案。我想在一行中实现两列;左列中有一个图像(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 吗?不幸的是,我没有这方面的经验。

css flexbox css-float 引导程序-5

评论


答:

0赞 Kasia 9/15/2023 #1

溶液:

  1. 删除行

  2. 删除第 2 个分区的网格宽度

  3. 将 float-none 添加到第二个 div

  4. 将 float-start 添加到第一个 div

        <div class="float-start col-md-3 col-lg-4">IMAGE</div>
        <div class="float-none">TEXT</div>