ブートストラップimg-responsiveクラス - イメージが重複しています

Question

私はそれぞれ3つのイメージを含む2つの行を持っています。私はブートストラップグリッドシステムを使用しています。私の問題は、2行目の画像が一番上の行の画像に流れ込むことです。ここに私のマークアップは次のとおりです。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.img-responsive { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p2.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p3.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p4.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p5.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p6.jpg" class="img-responsive"></div> 
 
    </div> 
 
</div>

この質問はすでに回答されている場合、私はお詫び申し上げます。私は長い間、新聞ではないことを望んで、全部newbです。ありがとうございました！

UPD。私は2つの行を分離して、それらの間に薄いスペースがあるようにしたい。

Answer 1

1. ：これを試してみてください。行間にスペースができます。

2. クラスは、bootstrap.cssで定義されています。したがって、すべてのプロパティをコピーする必要はありません。新しいものを追加するだけです。例えば

：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.img-responsive { 
 
    display: block; 
 
    margin-top: 20px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p2.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p3.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p4.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p5.jpg" class="img-responsive"></div> 
 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p6.jpg" class="img-responsive"></div> 
 
    </div> 
 
</div>

Answer 2

私はhtmlに関しては専門家ではありませんが、最初の行にいくつかのブレークを追加するのは簡単な解決策ではありませんか？

それは次のようになります...

<div class="row"> 
    //your columns 
</div> 
<br><br><br> 
<div class="row"> 
    //your columns 
</div> 

更新：今、私はあなたのhtmlを参照のこと、私はあなたが第二列に欠けていることがわかります。あなたがあなたのイメージにmargin-topプロパティを追加することができます

<div class="container"> 
<div class="row"> 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" class="img-responsive"></div> 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p2.jpg" class="img-responsive"></div> 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p3.jpg" class="img-responsive"></div> 
</div> 
<div class="row"> 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p4.jpg" class="img-responsive"></div> 
    <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p5.jpg" class="img-responsive"></div> 
    <div class="col-md-4">"<img src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p6.jpg" class="img-responsive"></div> 
</div>