Twitter Bootstrap 视频漂浮在 Main 上

如何解决Twitter Bootstrap 视频漂浮在 Main 上

我想在段落旁边放一个视频。我设置了行和列，但是当我对其进行可视化时，该段落占据了屏幕的 100% 并且视频漂浮在它上面，将部分文本隐藏在它后面。这不是网格，我不明白为什么。

这是 HTML5 代码：

<section class="container-fluid">
            <div class="row">
                <div class="col-md-1">
                    <video muted autoplay loop> 
                        <source src="MyVid.mp4"> 
                    </video>
                </div>
                <div class="col-md-6">
                    <p>
                        Some Text
                    </p>
                </div>
            </div>
</section>

解决方法

您颠倒了 col-md-1 和 col-md-6 类。您的视频容器为 8.3333333333% 宽，容器文本为 50%。重新排列这些类，并为 w-100 标记添加类 <video>。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />

<section class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <video class="w-100" muted autoplay loop>
                <source src="http://vjs.zencdn.net/v/oceans.mp4" />
            </video>
        </div>
        <div class="col-md-1">
            <p>
                Some Text
            </p>
        </div>
    </div>
</section>