Html 不规则引导列包装

使用最新版本的haml、haml Rails、sass和引导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列。

这是由两行或更多文本的技能造成的。使用

float

属性时，这是一个众所周知的错误。下面是一个需要理解的小图片：

选项1：强制调整高度 第一个选项是强制图元具有相同的高度：

.tutor {
    height: 500px;
}

• [Pro]简单，随处可见
• [Con]使用一个神奇的数字
• [Con]限制技能中的行数
• [Con]可修改版本上的无用空格

选项2：使用clearfix 您的第二个选择是使用clearfix，并强制第5个元素位于新行上（第9行、第13行相同）：

• [Pro]不限制技能中的行数
• [Pro]没有无用的空白
• [Pro]没有神奇的数字
• [Con]每种尺寸一条CSS规则（

  xs/sm/md/lg

  ）
• [Con]规则取决于您的网格（

  .col-xx-3

  ）

---

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

从外观上看，您正在一行中呈现所有列。你需要改变它 因此，它每4列开始一个新行，即。 （普通的旧雇员再培训局）

...

---

在我的例子中，可能不需要在第一个循环中显示a，我想在大屏幕上显示每行3个项目，在中屏幕上显示2个项目，在小屏幕上显示1个项目

您还可以取消注释背景色，以验证触发效果的时间

/*修复了由于高度可变而以奇数方式包装的列*/
/*当每行显示2个项目时，清除#1、3、5*/
@介质（最小宽度：$screen sm min）{
.单元盒：第n个子单元（2n+1）{
明确：两者皆有；
/*背景色：rgba（0,0,255,5）；/*蓝色*/
}
}
/*当每行显示3个项目时，清除#1、4、7*/
@介质（最小宽度：$screen md min）{
.单元盒：第n个子单元（2n+1）{
明确：无；
}
.单元盒：第n个子单元（3n+1）{
明确：两者皆有；
/*背景色：rgba（0,255,0,5）；/*绿色*/
}
}

在此处查看我的答案：。这里有一个Bootply演示：。还有，关于“传统”响应重置的更多细节：很好的答案。我想补充一点，你可以把导师的技能放到另一个div中，并为它定义一个最小高度，因此即使它没有太多内容，也会保持高度。谢谢。问题不是最小高度，而是最大高度。无论

min height

，如果一个元素比它的跟随者高，它都会打破你的界限。@zessx我今天刚刚回答了一个类似的问题，并给出了与你的第一个差不多的方法，因为这是一个非常常见的场景。就我个人而言，我倾向于使用“最大高度”和“最小高度”的组合来实现更好的控制（这样我可以提供更多的空间/间距，但在媒体查询中使用更少的编码）。但是，我想为OP添加另一种方法：简单地通过字符（而不是单词）限制技能，使它们始终保持相同的长度，或者强制使用最少的行数。不管怎样，这个答案和解释都是+1。伟大的文档，赏金awarded@vipin8169我看不出有什么问题。#2解决方案不关心行的高度。即使它是动态更改的，它也会工作，并将整个下一行向下推。问题是，它们无法在不同的屏幕大小上轻松地从3列切换到4列。感谢您的推荐这正是我想要的。谢谢我对它进行了修改，将断点和“每行项目数”放在一行（循环中）。

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

  <% @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 %>