Bootstrap img-abgerundet mit. Col-Klasse funktioniert nicht

Question

Ich habe Bootstrap-Framework-Seite, die zwei Bilder.

1. Bild: Dieses Bild hat zwei Klassen: col-sm-12 und img-gerundet.

2. Bild: Dieses Bild hat nur eine Klasse: img-gerundet.

Das Problem ist, für das erste Bild, das Bild ohne Grenzradius. Aber wenn ich col-sm-12 vom Tag entferne, ist dieser Rand-Radius deutlich sichtbar. Was ist falsch in diesen beiden Fällen?

Warum für 1. Fall, Rand-Radius nicht angezeigt?

Fiddle here

<div class="row" style="background-color:red;"> 
    <img class="col-sm-4 img-rounded" 
    src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" > 
</div> 
<br> 
<div class="row" style="background-color:red;"> 
    <img class="img-rounded" 
    src="http://images.indianexpress.com/2014/11/doordarshan422.jpg" > 
</div> 

Answer 1

Wenn Sie die img-rounded Klasse mit der Anwendung col-sm-4 dann besetzt das img-Tag das Padding rechts und links von 15px der Klasse col-sm-4 und img-gerundet cl ass hat border-radius6px nur, So ist es nicht in Ihrem ersten Fall.

Wenn Sie im ersten Fall anwenden möchten, dann erhöhen Sie die border-radius und setzen Sie es auf greater then 15px.

vielleicht haben Sie Ihre Antwort.

Answer 2

Sie müssen Ihre col-sm-4 Klasse die div mit dem Bild anzuwenden, nicht das Bild selbst:

<div class="container"> 
    <div class="row" style="background-color:red;"> 
    <div class="col-sm-4"> 
     <img class="img-rounded" 
      src="http://images.indianexpress.com/2014/11/doordarshan422.jpg"> 
    </div> 
    </div> 
</div>