img-circle超出保證金

Question

我創建了一個img-circle作爲使用兩個.col-xs-6,的文本段落放置在相同的row上，但我的圖像溢出了container的餘量。

我試過將padding更改爲0，但沒有奏效。

我目前沒有任何CSS樣式的img-circle。

<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

你需要img使用.img-responsive類，請參閱引導3引導Docs

的圖像可以通過.img-responsive類的另外 作出響應友好。這對圖像適用max-width: 100%;, height: auto;和display: block;，以便它很好地適應父元素。

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