Twitter Bootstrap 视频漂浮在主屏幕上

Question

我想在段落旁边放一个视频。我设置了行和列，但是当我可视化它时，该段落占据了 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>

Answer 1

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

<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>

Twitter Bootstrap 视频漂浮在主屏幕上

Twitter Bootstrap video is floating over the Main

html

video

grid

main

twitter-bootstrap