余白の外へ行く

Question

私は.col-xs-6,を2つ使用してrowと同じrowに配置するように作成しましたが、画像はcontainerの余白にあふれています。

私はpaddingを0に変更しようとしましたが、うまくいかなかった。

現在、img-circleのCSSスタイリングはありません。

<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

あなたは、ブートストラップ3でブートストラップDocs

画像は.img-responsiveクラスの追加 を経由して応答フレンドリー行うことができます参照して、imgでクラス.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>