Question

我一直遇到Bootstrap 3中不同长度列的问题，这些列没有正确对齐，最终无意中看起来像一个砌体布局。

我找到了这个解决方案： 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中是相同的，那么为什么它不会以同样的方式响应呢？

希望有人可以指出显而易见的事实。谢谢。 NJ

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;
    }
}

我确信其他突破点也是如此。本质上，这是告诉第五个元素，.col-lg-3元素类不浮动。因为在同一行中有一个col-xs-12元素，在这些元素之上，它是第五个元素。将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中工作但在实际站点上没有？

1 个答案: