任意のパディングやスペース

Question

なしこれは私が達成しようとしているレイアウトに似ている2つの列、ブートストラップレイアウト：

私が使用して試してみました、私は今

<div class="row "> 
     <div class="col-lg-6 row-eq-height push-right"> 
      <img src="1.jpg" class="img-responsive"> 
     </div> 

     <div class="col-lg-6 row-eq-height"> 
      <div class="eq-row-text "> 
       <p class="row-text">Text description for image </p> 
      </div> 
     </div> 
    </div> 

    <div class="row "> 
     <div class="col-lg-6 row-eq-height "> 
      <div class="eq-row-text "> 
       <p class="row-text"> Text description for the image </p> 
      </div> 
     </div> 

     <div class="col-lg-6 row-eq-height"> 
      <img src="1.jpg" class="img-responsive"> 
     </div> 
    </div> 

を持っているコードCSSクラスの "no-padding"とマージンで遊んでみました。 0パディングを適用すると、最初のイメージの左側がブラウザの端に接触します（これが望ましい）が、もう一方の端（イメージの右側）にはまだ空きスペースがある。

空の領域を削除して参照レイアウトのような結果を得る方法を教えてください。

Answer 1

<p>のパディング/マージンに問題があり、<img>のパディング/マージンの問題もあります。しかし、それは行内の要素のサイジングに問題があるようです。

私は、しかし、一見、私はあなたがrow-eq-heightブートストラップクラスを使用しているとして、これは望ましい結果のために必要になる場合があり、行のクラスにheight: ***を追加私のPEN HERE

で問題を解決しました。

HTML

<div class="row "> 
    <div class="col-lg-6 row-eq-height push-right"> 
     <img src="1.jpg" class="img-responsive"> 
    </div> 
    <div class="col-lg-6 row-eq-height"> 
     <div class="eq-row-text "> 
      <p class="row-text">Text description for image </p> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-lg-6 row-eq-height "> 
      <div class="eq-row-text "> 
       <p class="row-text"> Text description for the image </p> 
      </div> 
     </div> 
    <div class="col-lg-6 row-eq-height"> 
      <img src="1.jpg" class="img-responsive"> 
    </div> 
</div> 

CSS

p{ 
    margin: 0; 
    padding: 0; 
} 
img{ 
    margin: 0; 
    padding: 0; 
} 
.row { 
    margin: 0; 
    padding: 0; 
    height:60px; 
    background-color: #eee 
} 

Answer 2

.col-md-6{ 
    padding-right: 0px; 
    padding-left: 0px; 
} 

Answer 3

LESS/SASSソースを使用している場合：あなたはを取り除きたい場合は変更@grid-gutter-widthを変数には、0

Answer 4

にファイル空白は、あなたの画像を大きくしてコラムにまたがる必要があります。あなたは手動でCSSを使用して画像の幅を調整することができます：

img { 
    width: 100%; 
}