Zwei Bilder mit Col-SM-Offset überlappen sich bei der Größenanpassung

Question

Ich verwende einen Bootstrap row mit zwei Spalten, eine mit col-sm-2 col-sm-offset-4 und eine andere mit nur col-sm-2. Der Zweck ist, eine Abteilung mit Logos zu haben, um Presse zu zeigen.

Wenn jedoch die Bildschirmbreite kleiner wird, überlappt das erste Logo aufgrund unterschiedlicher Bildproportionen mit dem zweiten.

Wie kann ich dies verhindern und eine kleine Lücke zwischen den Logos beibehalten, die proportional ist, wobei das zweite Logo unter der ersten liegt, wenn die Bildschirmbreite klein ist (wie es Bootstrap tut).

http://www.bootply.com/xitSVxvqVY

Answer 1

Um zu verhindern, Bilder überlappen Sie ihre Breite in % einstellen müssen. hier ist meine Lösung:

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