img-circle dış kenar boşluğuna gidiyor

Question

Bir iki .col-xs-6, kullanarak bir metin paragrafı olarak yerleştirilmiş bir img-circle oluşturdum ama görüntüüm container kenar boşluğu üzerinde dökülüyor.

padding'u 0 olarak değiştirmeyi denedim, ancak çalışmadı.

Şu anda img-circle için CSS şekillendirmem yok.

<div class="container about"> 
    <div class="row"> 
      <div class="col-xs-6"> 
       <p class="hello">Hello,</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <p class="intro">text from paragraph here</p> 
      </div> 
      <div class="col-xs-6"> 
       <img class="profile-pic img-circle" src="#"/> 
      </div> 
     </div> 

Answer 1

Eğer img sınıfı .img-responsive kullanmak gerekir, Bootstrap 3'te Bootstrap Docs

Görüntüler .img-responsive sınıfının eklenmesi yoluyla duyarlı dostu yapılabilir bkz. Bu, max-width: 100%;, height: auto; ve display: block; görüntülerini, ana öğeye iyi ölçeklenecek şekilde uygular.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container about"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p class="hello">Hello,</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p class="intro">text from paragraph here</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" /> 
 
    </div> 
 
    </div> 
 
</div>