Question

我有问题要显示我的照片，这是它的样子：

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>

Answer 1

来自bootstrap的文档：

如果一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行

所以我认为它应该有4个带有类col-md-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>

否则，您可以使用像Masonry https://masonry.desandro.com这样的js库，或者使用纯css http://w3bits.com/css-masonry/作为Michael Coker的评论

Answer 2

你能尝试这样的事吗？

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

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

Boostrap图片显示

2 个答案: