奇怪的浮动块包装在引导程序 3 col-* divs 列表中[重复]

Posted 2023-03-05

【中文标题】奇怪的浮动块包装在引导程序 3 col-* divs 列表中[重复]

【英文标题】：Weird floated blocks wrapping in bootstrap 3 col-* divs list [duplicate]

【发布时间】：2018-06-21 06:14:18

【问题描述】：

基本上我有一堆 square twitter-bootstrap col-md-x，col-sm-x div 一个接一个，以创建图像列表。它几乎完美地工作。除了在某些情况下（我无法弄清楚）它将最后一项包装到下一个 row 并且上一个项目向右浮动。虽然据我所知应该float:left 代码中所述？

还有：

所有方块高度相同

迁移到

v4 不可用

，因为我还有 200 个其他小部件 :) 第 n 个选择器将不起作用，因为

列数取决于屏幕尺寸

我尝试在块内添加 clearfixes，以及从内联块重建这一切。也尝试过类似表格的显示器，但无济于事。添加.rows 不是一种选择，因为它针对不同的屏幕分辨率有不同的列数。

它在最新的 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。

我还附上了截图：

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

【问题讨论】：

***.com/questions/48047690/…

***.com/questions/48024162/…

***.com/questions/48031923/my-footer-alignment

最好的解决办法是迁移到引导程序的 V4 或检查上面的链接你会得到一些选项

这可能是一个非常小的差异，但“块”没有相同的高度。

【参考方案1】：

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

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

clear CSS 属性指定一个元素是可以紧挨着它之前的浮动元素还是必须向下移动（清除） 在他们之下。 clear 属性适用于浮动和 非浮动元素。

Clear CSS Documentation