引导图像画廊网格对齐问题
问题描述:
我想建立这种我使用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 -->
答
你有什么是它有三列一行。这三列中的两列有一列有两列。
以下是您可以构建的一个基本示例。
.gallery .v-spacer {
margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<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>
注意我们继续使用.row
和列类.col-**-**
维持其中使用填充和负边距以创建列及其容器之间的檐沟(空间)网格的适当结构。
编辑如果您尝试使其响应,您会对中间图像有点问题。中间的图像并不总是与堆叠的图像对齐。这是因为堆叠图像列的总高度是两个可变高度加上固定高度。中间图像将无法与100%匹配,因为它始终是单个可变高度,并且将无法与堆叠列中引入的固定高度相匹配。
答
你应该遵循以下电网结构
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
1
</div>
<div class="col-md-12 border">
2
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border long">
3
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
4
</div>
<div class="col-md-12 border">
5
</div>
</div>
</div>
</div>
</div>
看到fiddle
答
可以用下面的代码试试。
演示: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>