使用 Bootstrap 4 对齐列时出现问题

Question

我现在正在学习网页设计并制作一个模拟网站，我对 bootstrap、css 和 html 非常陌生，不知道我哪里出错了，我开始像一直在做的那样努力这整个早上都没有结果，所以我希望你们能帮助我。我一直在尝试将 div 的文本部分与视频的右侧对齐。我设法把它移到了右边，但没有放在它旁边，所以它都在后台容器内。在我看来，这可能是列的问题，因为视频列一直延伸，我想知道它们是否阻止了最后一个列向上移动。我希望这是有道理的。

我尝试了不同的显示和浮动选项以及分离和混合行，但似乎没有成功。

下面的HTML代码和CSS：

<!--CONTAINER MAIN ABOUT INFO-->
<div class="page-header">
    <h2>About Us</h2>
</div>
<div class="container container-about">
    <!--VIDEOS-->
    <div class="row videos">
        <div class="col-md-4 vid1">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/afRUIVxTGls" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-4 vid2">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/NNgRnJIjXM4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-8 about">
            <p><strong>lorem epson etc</p>
        </div>
    </div>
</div>
<!--END OF MAIN ABOUT INFO-->

CSS

.videos {
    display: inline;
}

.about {
    float: right;
}

enter image description here

Answer 1

Bootstrap 的 grid system 基于 12 列网格。如果您希望内容并排在同一行上，列类的总和需要等于（或小于）12。现在，在该行中，您有 4、4 和 8 ——加起来是 16：

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-8"></div>
    </div>
</div>

如果您的布局中前两列占行的四分之一，第二列占行的一半，请改用 3 + 3 + 6 = 12：

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-6"></div>
    </div>
</div>

（另外，别忘了关闭<strong> 标签。）