Bootstrap 3中Youtube（Iframe）左右的响应图像答案

【问题标题】：Responsive Images to the right and left of the Youtube (Iframe) in Bootstrap 3Bootstrap 3中Youtube（Iframe）左右的响应图像
【发布时间】：2018-03-22 11:03:39
【问题描述】：

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

我试图用position: absolute 来做这件事；一切都很好，但是当屏幕缩放时，就会出现问题。如何使图像看起来像在图像上，但是响应性一切正常吗？

<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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive

【解决方案1】：

您可以通过将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>

【讨论】：

【解决方案2】：

    Hi Since you are using bootstrap, please align your code with bootstrap grid system, 

<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>
<style>
img{
    width:30px;height:30px;
}
.embed-responsive{
    width:100%;
}
</style>
<section id="trailer">
    <div class="container">
        <div class="row">
<div class="col-sm-2 col-md-2 col-xs-2 col-lg-2">
<img src="http://via.placeholder.com/170x400" alt="" class="trailer_wrapper--one img-responsive"/>
</div>
<div class="col-sm-8 col-md-8 col-xs-8 col-lg-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
</div>
</div>
<div class="col-sm-2 col-md-2 col-xs-2 col-lg-2">
    <img src="http://via.placeholder.com/170x300" alt="" class="trailer_wrapper--two img-responsive">  
    </div>
</div>

    </div>
</section>
</html>

You can style the height and width of image as per your need. This makes your website looks responsive and good looking.
Happy coding !! :)

【讨论】：