Bootstrap 3 列 clearfix 在 Bootply 中工作但在实时站点上不工作？

Question

我在 Bootstrap 3 中遇到了不同长度列的问题，没有正确对齐并最终无意中看起来像 Masonry 布局。

我找到了这个解决方案： http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

...并创建了一个非常有用的 Bootply： http://www.bootply.com/L6ocKtCcsI

但是，在我的测试站点上，列仍然对齐不正确： http://www.nathonjoneswebdesign.co.uk/tmsa/TMSA-board-members.php

测试站点上的 CSS 和 HTML 与我的 Bootply 中的一样，那么为什么它的响应方式不同？

希望有人能指出显而易见的地方。谢谢你。新泽西

Answer 1

在您的 styles.css 中，您有以下代码：

@media (min-width: 1200px) {
    .col-lg-1:nth-child(12n+1), 
    .col-lg-2:nth-child(6n+1), 
    .col-lg-3:nth-child(4n+1), 
    .col-lg-4:nth-child(3n+1), 
    .col-lg-6:nth-child(2n+1) {
        clear: left;
    }
}

而且我确信其他断点也类似。本质上这是告诉第五个元素 class of .col-lg-3 元素不要浮动。因为在同一行中有一个 col-xs-12 元素，在这些元素之上，它是第 5 个元素。将 col-xs-12 元素放在它自己的行中，它是固定的。像这样：

<div class="row">
    <div class="col-xs-12">
        <h1>TMSA Board Members</h1>
    </div>
</div>
<div class="row" id="staff">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
</div>

Bootstrap 3 列 clearfix 在 Bootply 中工作但在实时站点上不工作？

Bootstrap 3 column clearfix working in Bootply but not on live site?

clearfix

twitter-bootstrap-3