为什么 Bootstrap 的 clearfix 类在这里不起作用？答案

【问题标题】：Why doesn't Bootstrap's clearfix class work here?为什么 Bootstrap 的 clearfix 类在这里不起作用？
【发布时间】：2015-07-30 05:17:39
【问题描述】：

我正在开发一个包含照片库的网站。照片库中的许多图像大小不同，但它们的所有宽度都相同。在平板电脑和桌面版本中，照片库形成 4 个整齐的列，并且行正确对齐。在智能手机版本中，它们形成 2 列（我想要的方式），但行未对齐。这就是问题所在。

我该如何解决这个问题？我尝试在有问题的图像之间使用 clearfix。发生了一件有趣的事情：编辑文件后一小时，clearfix 运行良好。但不久之后问题又回来了。我已经重新启动了我的电脑、浏览器、清除缓存...仍然存在。

我在 Windows 和三星 Galaxy 智能手机上测试了 Chrome、Firefox、Safari 中未对齐的照片库。还在。

您可以在此处查看未对齐的照片画廊...这位艺术家绘制裸体模特，所以...成人内容咨询：www.ericeickmann.com/panel.html

我的 CSS 是标准的 Bootstrap CSS 文件夹，有一些小的改动，例如。排版。我也在使用 Lightbox：http://lokeshdhakar.com/projects/lightbox2 请注意，在我添加 Lightbox 的代码之前 clearfix 停止工作。

这是我的 HTML：

    <!-- row 1 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>

        <div class="clearfix visible-sm"></div>

        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
    </div>

    <!-- row 2 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>

        <div class="clearfix visible-sm"></div>

        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
        <div class="col-lg-3 col-xs-6">
                <a href="" data-lightbox="panel" data-title=''>
                <img src=""/>
                    <p></p>
                </a>
        </div>
    </div>

【问题讨论】：

您还需要包含 CSS。
您的示例代码中有一个额外的<h2>：<p>IN HIND SIGHT, 2014 <br>Acrylic on Panel 7" x 7.5"</h2></p></a>
@Shaggy 我使用的是标准的 Bootstrap CSS，只做了一些小的改动，例如背景颜色和排版。如果我要包含我所有的 CSS，我将需要一个小时来缩进所有内容。
@dippas 感谢您指出这一点！ :) 我修好了，但 clearfix 问题没有解决。
这是一个入门演示。请修改它以显示您的问题并添加指向您的问题的链接。 jsfiddle.net/isherwood/5z57uoem

标签： html css twitter-bootstrap

【解决方案1】：

进一步阅读后，我认为解决这个bug的方法是“砌体”风格的CSS、Javascript和JQuery。 Clearfix 只是创建不同高度的 Bootstrap 照片画廊的一种解决方案，但我认为更优雅的解决方案在于上述技术。

【讨论】：