Bootstrap img-responsive類 - 圖像重疊

Question

我有兩行，每行包含3張圖片。 我正在使用Bootstrap網格系統。 我的問題是，第二行的圖像是否會進入頂行的圖像。 這是我的標記：

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

如果這個問題已經得到解答，我道歉。 我是一個全新的人，希望不要長久成為新手。 謝謝！

UPD 。 我希望將兩行分開，以便它們之間有一個很小的空間。

Answer 1

在html方面我不是專家，但是在第一行下添加一些中斷不是一個簡單的解決方案嗎？

看起來像這樣......

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

更新：現在我看到你的HTML我發現你錯過了第二行。 嘗試這個：

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

Answer 2

1. 您可以將margin-top屬性添加到圖像中。 它在行之間創建一個空格。

2. .img-responsive類已在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>