不规则的自举列包装

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

• [专业]简单，随处可见
• [Con]使用幻数
• [Con]限制技能中的行数
• [Con] modile version
上的无用空格

<强> [Bootply] Force height

选项＃2：使用clearfix

您的第二个选择是使用clearfix，并强制第5个元素在新行上（对于第9个，第13个......）：

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

• [专业]不限制技能中的行数
• [专业]没有无用的空白
• [亲]没有神奇的数字
• [Con]每个尺寸的一个CSS规则（xs/sm/md/lg）
• [Con]规则取决于您的网格（.col-xx-3）

<强> [Bootply] Clearfix

Answer 2

在我的情况下，我希望在大屏幕上每行显示3个项目，在中型屏幕上显示2个项目，在小屏幕上显示1个项目。

您也可以取消注释背景颜色，以验证效果何时触发。

http://www.bootply.com/QOor73wFAY#

/* fixes for columns wrapping in odd ways due to variable height */
/* when showing 2 items per row, clear #1, 3, 5 */
@media (min-width: $screen-sm-min){
    .cell-box:nth-child(2n+1){
        clear: both;
        /* background-color: rgba(0, 0, 255, .5); /* blue */
    }
}
/* when showing 3 items per row, clear #1, 4, 7 */
@media (min-width: $screen-md-min){
    .cell-box:nth-child(2n+1){
        clear: none;
    }
    .cell-box:nth-child(3n+1){
        clear: both;
        /* background-color: rgba(0, 255, 0, .5); /* green */
    }
}

Answer 3

有时，我也会遇到这个问题。我建议尝试覆盖您不需要的任何填充或边距。尝试首先将边距更改为0。然后删除一些填充。这有助于我的一些案例。

Answer 4

通过它的外观，您将在一行中呈现所有列。你需要改变它 这样它每4列开始一个新行，即 （普通的老erb）

  <% @users.each_slice(4).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |tutors| %>
         <div class="col-sm-3">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

您可能不需要第一个循环上的to_a