推特引导视频在主屏幕上浮动。

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

您反转了类col-md-1和col-md-6。您的视频容器是8.3333333333% wide，容器文本是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>

​