gpt4 book ai didi

html - Bootstrap 3 中 Youtube (Iframe) 左右两侧的响应式图片

转载 作者:太空宇宙 更新时间:2023-11-04 01:19:28 24 4
gpt4 key购买 nike

我有一个案例,我不知道如何解决。我有一个 Bootstrap 3 部分,视频位于中间。我需要在视频边缘的左侧添加一个图像,在视频边缘的右侧添加第二个图像。就像我在图片中设计的那样。

我试着用 position: absolute 来做到这一点;一切都很好,但是当屏幕缩放时,就会出现问题。我如何使图像看起来像它们在图像上一样,但响应是否一切正常? enter image description here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<section id="trailer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="http://via.placeholder.com/170x400" alt="" class="trailer_wrapper--one img-responsive">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
</div>
<img src="http://via.placeholder.com/170x300" alt="" class="trailer_wrapper--two img-responsive">
</div>
</div>
</div>
</section>
</html>

最佳答案

您可以通过将 sm-12 拆分为 2+8+2

.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="trailer">
<div class="container">
<div class="row">
<div class="col-xs-2 pr-0"> <img src="http://via.placeholder.com/170x400" alt="" class="trailer_wrapper--one img-responsive"> </div>
<div class="col-xs-8 pl-0 pr-0">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
</div>
</div>
<div class="col-xs-2 pl-0"> <img src="http://via.placeholder.com/170x300" alt="" class="trailer_wrapper--two img-responsive"> </div>
</div>
</div>
</section>

关于html - Bootstrap 3 中 Youtube (Iframe) 左右两侧的响应式图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49427016/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com