Question

此刻我正在研究Web设计并制作一个模拟网站，我对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>标签。）

使用Bootstrap 4

1 个答案: