我正在尝试使用Bootstrap构建这种图像网格,但我在理解如何创建代码时遇到了一些问题。这是最后一个例子。
这是我的代码,直到现在
.border { border: 1px solid red; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
<div class="row">
<div class="col-md-8 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
</div><!-- container -->
&#13;
答案 0 :(得分:1)
你所拥有的是一行中有三列。这三列中的两列有一列有两行。
以下是您可以构建的基本示例。
.gallery .v-spacer {
margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gallery">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/600x830">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
</div>
</div>
&#13;
请注意,我们继续使用.row
和列类.col-**-**
来维护网格的正确结构,该网格使用填充和负边距来创建列与其容器之间的排水沟(空间)。 / p>
修改如果您尝试使其响应,则中间图像会出现一些问题。中间图像不会始终与堆叠图像对齐。这是因为堆叠图像列的总高度是两个可变高度加上固定高度。中间图像无法匹配100%,因为它始终是单个可变高度,并且无法匹配堆叠列中引入的固定高度。
答案 1 :(得分:1)
你应该遵循以下网格结构
{ state: 'success',
sessionId: 'bc0b1b932cf8dac815bc8f1d94128a3c0d0278bd',
hCode: 16988771,
value: { ELEMENT: '2' },
class: 'org.openqa.selenium.remote.Response',
status: 0 }
请参阅fiddle
答案 2 :(得分:1)
可以尝试下面的代码。
演示:https://jsfiddle.net/uurzr45k/2/
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>