无法使用Bootstrap 4对齐列

问题描述 投票:-3回答:1

我正在学习网页设计和制作一个模拟网站,我对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

html css bootstrap-4
1个回答
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>标签。)

© www.soinside.com 2019 - 2024. All rights reserved.