当调整大小时，两个图像与col-sm-offset相互重叠

Question

我正在使用带有两列的引导程序row，一列使用col-sm-2 col-sm-offset-4，另一列使用col-sm-2。目的是为了有一个标志部分，显示按。

然而，减小屏幕的宽度较小时，第一标志重叠第二个，由于不同的图像的比例。

我怎样才能防止这种情况发生，如果屏幕宽度很小维持标志之间一个很好的差距成正比，与第二标志会低于第一（自举不反正）。

http://www.bootply.com/xitSVxvqVY

Answer 1

为了防止图像重叠你需要设置其宽度%。 这里是我的解决方案：

/* CSS used here will be applied after bootstrap.css */ 
 
#g { 
 
    background: #f2f2f2; 
 
    padding-top: 20px; 
 
    padding-bottom: 60px; 
 
} 
 

 
.text-muted { 
 
    color: darkslategray; 
 
} 
 

 
.sponsor img { 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    margin-bottom: 10px; 
 
} 
 

 
.sponsor{ 
 
    height: 80px; 
 
    line-height: 80px; 
 
}

<div id="g"> 
 
     <div class="row"> 
 
      <div class="col-lg-8 col-lg-offset-2 text-center"> 
 
       <h3 class="large text-muted">Press and Media</h3> 
 
      </div> 
 
     </div> 
 
     <div class="container-fluid"> 
 
      <div class="row sponsor centered"> 
 
       <div class="col-sm-2 col-sm-offset-4 col-xs-8 col-xs-offset-2"> 
 
        <a href="https://www.google.com"> 
 
         <img src="http://placehold.it/2000x349" alt=""> 
 
        </a> 
 
       </div> 
 
       <div class="col-sm-2 col-sm-offset-0 col-xs-8 col-xs-offset-2 "> 
 
        <a href="https://www.google.com"> 
 
         <img src="http://placehold.it/600x300" alt=""> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <!--/row--> 
 
     </div> 
 
    </div>