html - Bootstrap 缩略图列表留下空列

Question

我正在尝试使用 Bootstrap 3.3.7 制作带有标题的图像列表，例如图片库，我得到了这个 weird behaviour

我正在使用一个无序列表组，每个图像都有一个列表组项:

<section>
    <div class="content container">
        <div class="control row">
            <div class="col-md-12">
                <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Upload</button>
            </div>
        </div>
        <ul class="list-group row">
        {{#each pictures}}
                    <li class="list-group-item col-md-3 col-xs-6 col-sm-6">
                        <div class="thumbnail">
                            <img src="{{path}}" alt="imagefail" style="width:100%">
                            <div>
                                <h3 style="">{{title}}</h3>
                                <button class="copyButton btn btn-primary btn-block"><i class="fa fa-clipboard" aria-hidden="true"></i>&#160Copy</button>
                                <button class="deleteButton btn btn-danger btn-block"><i class="fa fa-trash-o" aria-hidden="true"></i>&#160Delete</button>
                            </div>
                        </div>
                    </li>
        {{/each}}
        </ul>
    </div>
</section>

我尝试使用 div.row 而不是无序列表，并且为每个图像使用 div.col-md-3 并且它具有相同的结果:

<div class="row">
{{#each pictures}}
    <div class="list-group-item col-md-3 col-xs-6 col-sm-6">
       ....
    </div>
{{/each}}
</div>

您知道任何不需要每 4 列使用一行的解决方案吗？

Answer 1

固定图像的高度，它会正常工作。

<div class="row">
  {{#each pictures}}
      <div class="col-md-3 col-xs-6 col-sm-6">
          <img src="{{path}}" alt="imagefail" style="width:100%; height:200px">
      </div>
  {{/each}}
</div>