基于Bootstrap 4.3.1实现文本环绕视频效果的问题求助

问题原因 #

你现在用的Bootstrap栅格系统默认是Flex布局，.row为display: flex容器，其直接子元素（也就是你拆分左右两栏的.col-lg-4和.col-lg-8）的float属性会被Flex布局规则强制失效，这就是你加float没效果的根本原因。同时把文字和视频放在两个独立的Flex子项里，本身就是互相独立的块，不可能实现文字环绕效果。

解决方案 #

调整DOM结构，把视频元素放到文字所在的<article>标签内部的开头位置，结合Bootstrap自带的响应式工具类实现大屏环绕、小屏堆叠的效果，不需要额外写自定义CSS。

修改后的完整代码如下：

<div class="container-fluid">
    <div class="row">
        <!-- 只保留一个全宽列，不再拆分左右两个独立col -->
        <div class="col-12">
            <article class="clearfix">
                <h1 class="display-4 text-center">Miért jó a töltötoll?</h1>
                <hr>
                <!-- 把视频放到文字段落之前，加响应式浮动和宽度 -->
                <figure class="float-lg-right col-lg-8 ps-lg-3 mb-3 hide-on-print">
                    <video class="embed-responsive embed-responsive-16by9 w-100" controls poster="images/poster.png">
                        <source class="embed-responsive-item" src="images/video.mp4">
                        <source class="embed-responsive-item" src="images/video.ogg">
                        您的浏览器不支持video标签。
                    </video>
                </figure>
                <p class="text-justify">Egy igazán jó töltőtoll akár egész életünkben hű társunk lehet az írás területén. Aki igényes és szeretné, hogy azok az írások, amiket készít nagyon szépek legyenek azoknak érdemes a töltőtollak között szétnézni. A töltőtollal készített írások teljesen máshogy néznek ki mint a golyóstollal készítettek, sokkal szebbek és igényesebbek. Egy töltőtoll sokkal szebben és igényesebben kidolgozott íróeszköz mint az egyszerűbb golyóstollak, arról nem is beszélve, hogy sokkal tartósabbak mint a golyóstollak. Egy jó töltőtollal az írás érzete is sokkal jobb, csak úgy siklik a papíron a tollnak a hegye. A toll tartásának a változtatásával pedig más és más vastagságú írás módot alkalmazhatunk. Ez pedig egy elegáns írásképet ad a töltőtoll tulajdonosának. A töltőtollakhoz, többféle színű tintát kapunk így még színesebbé tehetjük az írást.</p>
                <hr>
                <p class= "text-justify hide-on-print">A videóhoz tartozó leírás <a href="leiras.xhtml">elérhető ezen a linken.</a></p>
            </article>
        </div>
    </div>
</div>

代码说明 #

• 给<article>加了Bootstrap自带的.clearfix类，用来清除浮动带来的父元素高度塌陷问题
• 给<figure>加的类解释：
  • .float-lg-right：仅在lg及以上尺寸的屏幕下生效，让视频右浮动
  • .col-lg-8：大屏下视频宽度占父容器的8/12，和你原来的宽度设置保持一致
  • .ps-lg-3：大屏下给视频左侧加内边距，和旁边的文字隔开避免贴在一起
  • .mb-3：给视频底部加外边距，环绕的文字不会贴在视频底部
  • .w-100：确保视频在小屏时占满整行宽度
• 小于lg尺寸的屏幕下，浮动自动失效，视频会独占整行显示在文字上方，和你原来的自适应堆叠效果保持一致

内容的提问来源于stack exchange，提问作者justanoob