引导图像画廊网格对齐问题

问题描述：

我想建立这种我使用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>

引导图像画廊网格对齐问题

相关推荐