Question

我正在尝试使用Bootstrap 3.3.7创建带有标题的图像列表，就像图库一样，我得到了这个weird behaviour

我正在使用无序列表组，并为每个图像使用list-group-item：

<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

修复图像的高度，它将正常工作。

controller

Bootstrap缩略图列表留下空列

1 个答案: