图片和内嵌视频有差距,移动端看没有问题。
<div class="section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6"><div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" width="600px" height="360" src="images\phone.jpg"/> </div>
</div>
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_k4SA"></iframe>
</div>
</div>
</div>
</div>
</div>
最佳答案
用 col-sm-6 添加类 'nopadding' ...这将解决您的问题。
<div class="section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 nopadding"><div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" width="600px" height="360" src="images\lenovok5.jpg"/> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_9G7CGbk4SA"></iframe>
</div>
</div>
</div>
</div>
</div>
CSS文件添加如下代码:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
关于html - 水平图像和嵌入视频之间的差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40458070/