Question

基本上我有一堆又一堆的 square 的twitter-bootstrap col-md-x，col-sm-x div，以创建图像列表。它几乎几乎。除了在某些情况下（我无法弄清楚），它将最后一项包装到下一个行，前一项浮动到右侧。虽然根据我的最佳知识应该float:left，因为它在代码中说明了吗？

此外：

所有街区都有相同的高度
迁移到 v4不是选项，因为我还有200个其他小部件：）
第n个选择器不能用作列数取决于屏幕尺寸

我尝试在块内添加clearfix，以及从内联块重建这一切。也尝试使用表格式显示无济于事。添加.row不是一个选项，因为它有不同的列数用于不同的屏幕分辨率。

它在最新的FF和Chrome上的工作方式相同。

使用块清空视图以获得更清晰视图的代码，以及仅包含实际缩略图代码的最后一个块：

<div class="maslosoft-gallery-thumbs">
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
    <div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">

        <figure class="figure img-thumbnail img-margins">
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174b09b0063676204b74/w/167/h/167/p/0/IMG_0961.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55183709b006f976dac73e/w/167/h/167/p/0/IMG_0962.jpg">
                <div class="img-thumbnail maslosoft-gallery-horizontal-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55173c09b006cb73792f71/w/167/h/167/p/0/IMG_0960.jpg">
                <div class="img-thumbnail maslosoft-gallery-vertical-divider">
                </div>
                <div class="clearfix"></div>
            </a>
            <a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
               title="" style="width: 50%">
                <img src="https://xn--masekowski-d0b.pl/asset/get/5a55174809b006177664196e/w/167/h/167/p/0/IMG_0954.jpg">
                <div class="clearfix"></div>
            </a>
            <div class="clearfix"></div>
        </figure>
        <div class="clearfix"></div>
    </div>
</div>

我不知道如何重现问题（创建小提琴）。如果您滚动到底部，问题可以是seen here。

我还附上了截图：

请注意，我在周末离线，直到星期一才会回复。

Answer 1

我可以在参考链接中看到您的代码，您必须将 clear css属性设置为列。只需在代码中粘贴下面的css：

.maslosoft-gallery-thumbs-group:nth-child(odd) {
    clear: left;
}

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须向下移动（清除）   在他们之下。 clear属性适用于浮动和   非浮动元素。

<强> Clear CSS Documentation

奇怪的浮动块包裹在bootstrap 3 col- * divs列表中

1 个答案: