Question

我有两行，每行包含3张图片。我正在使用Bootstrap网格系统。我的问题是，第二行的图像是否会进入顶行的图像。这是我的标记：

＆＃13;

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

＆＃13;

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

＆＃13;

如果这个问题已经得到解答，我道歉。我是一个全新的人，希望不要长久成为新手。谢谢！

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

您可以将margin-top属性添加到图片中。它在行之间创建了一个空格。
.img-responsive类已在bootstrap.css中定义。所以你不需要复制它的所有属性。只需添加新的。

例如：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.img-responsive {
  display: block;
  margin-top: 20px;
  width: 100%;
}

＆＃13;

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

＆＃13;

Bootstrap img-responsive类 - 图像重叠

2 个答案: