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