自举图片显示

我要展示我的照片有问题，在这里是如何看起来像：自举图片显示

current display

这里是我怎么想它是：

desired display

一切图片应该在他的专栏的图片下。下面是代码：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class="row"> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
</div>

来源

2017-05-27 TakahT

您需要使用其中一种技巧。使用CSS，您可以创建列并制作像http://w3bits.com/css-masonry/的布局，或者您可以使用像Masonry这样的js库https://masonry.desandro.com/ –

从bootstrap文档：

如果超过12列被放置在单个行中，每一组额外的列的将作为一个单元，换到一个新的线

所以我觉得应该有col-md-4 4级div标签，并在每个div标签，你把图像变成这样：

<div class="row"> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
</div>

否则，你可以使用一个js库像砌体https://masonry.desandro.com或使用纯CSS http://w3bits.com/css-masonry/迈克尔·科克尔的评论

来源

2017-05-27 15:06:44

，你可以尝试这样的事情？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <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/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <div class="row"> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
        <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
      <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     <div class="col-md-12"> 
      <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     <div class="col-md-12"> 
      <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 




    </div> 

    </body> 
    </html>

您可能需要调整填充/边距，它是响应式的。

来源

2017-05-27 15:22:38

自举图片显示

回答

相关问题