Html 引导img响应类-图像重叠

我有两行，每行包含3个图像。我正在使用引导网格系统。我的问题是，第二行的图像与第一行的图像相撞。这是我的标记：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.img响应{
最大宽度：100%；
宽度：100%；
高度：自动；
显示：块；
}

---

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

"

---

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

"

您可以将

页边距顶部

属性添加到图像中。它在行与行之间留出一个空间

中定义了

.img responsive

类。因此，您不需要复制它的所有属性。只需添加新的

例如：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.img响应{
显示：块；
边缘顶部：20px；
宽度：100%；
}

您可以将

页边距顶部

属性添加到图像中。它在行与行之间留出一个空间

中定义了

.img responsive

类。因此，您不需要复制它的所有属性。只需添加新的

例如：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.img响应{
显示：块；
边缘顶部：20px；
宽度：100%；
}

您能提供html代码吗？欢迎使用SO！你的CSS看起来不错。请添加你的HTML。我没有看到重叠。。但是行与行之间没有空间。这就是你所说的“过度研磨”吗？对不起，我不是很清楚。我想把这两行分开，这样它们之间的空间就很小了。这更有意义吗？你能提供html代码吗？欢迎使用SO！你的CSS看起来不错。请添加你的HTML。我没有看到重叠。。但是行与行之间没有空间。这就是你所说的“过度研磨”吗？对不起，我不是很清楚。我想把这两行分开，这样它们之间的空间就很小了。这更有意义吗？天哪，成功了，成功了！！！非常感谢你。哦，我的话，我以为我要疯了。非常感谢你对我的帮助！天哪，成功了，成功了！！！非常感谢你。哦，我的话，我以为我要疯了。非常感谢你对我的帮助！