Bootstrap img-responsive类 - 图像重叠

Question

I have two rows containing 3 images each. I am using the Bootstrap grid system. My problem is, is that the images on the second row run into the images in the top row. Here is my markup:

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

I apologize if this question has already been answered. I'm a total newb, hoping not to be a newb for long. Thank you!

UPD . I want to have the two rows separated so there's a thin space between them.

Answer 1

I am no expert when it comes to html, but wouldn't an easy solution be to just add some breaks under the first row?

It would look something like this...

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

Update: Now that I see your html I see that you are missing the second row. Try this:

<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. You can add the margin-top property to your images. It makes a space between rows.

2. The .img-responsive class has defined in the bootstrap.css . So you don't need to copy all its properties. Just add the new ones.

For example:

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