html - 不规则的 Bootstrap 列换行

Question

使用最新版本的 haml、haml-rails、sass 和 bootstrap-sass 运行 Rails 4.1.4。对于用户显示，我的 HAML 是这样的:

.tutors-listing
    .row
      - @users.each do |tutor|
        .col-xs-12.col-md-3
          .row.tutor
            .col-xs-offset-1.col-xs-4.col-md-12
              = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo'
              %h4.tutor-name
                = tutor.first_name

             %p
                teaches
             %strong.tutor-skills
               = tutor.teachables

但是，此标记会导致以下故障:

我希望有人能找出这里出了什么问题。在中间断点处，应均匀分布4列。

Answer 1

这是2行文字以上的技能造成的。这是使用 float 属性时的一个众所周知的错误。这是一张小图来理解:

[Bootply] The issue

选项#1:强制高度

您的第一个选择是强制元素具有相同的高度:

.tutor {
    height: 500px;
}

• [Pro] 简单易行
• [缺点] 使用魔数(Magic Number)
• [缺点] 限制技能的行数
• [缺点] 模版上的无用空格

[Bootply] Force height

选项 #2:使用 clearfix

您的第二个选择是使用 clearfix，并强制第 5 个元素在新行上(第 9 个、第 13 个相同...):

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}

• [Pro] 不限制技能行数
• [Pro] 没有无用的空格
• [Pro] 没有魔数(Magic Number)
• [Con] 每个尺寸一个 CSS 规则 (xs/sm/md/lg)
• [Con] 规则取决于您的网格 (.col-xx-3)

[Bootply] Clearfix