不规则的引导列包装
使用最新版本的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列均匀。
这是由两行文字或更多的技能造成的。 使用float属性时，这是一个众所周知的错误。 这是一个小图片来理解：
[Bootply]问题
选项＃1：强制高度
你的第一个select是强制元素具有相同的高度：
.tutor { height: 500px; }
- [专业]简单，无处不在
- [Con]使用一个幻数
- [Con]限制技能中的行数
- 在软件版本上，无用的空格
[Bootply]强制高度
选项＃2：使用清除
你的第二个select是使用clearfix，并强制第五个元素在一个新的行（第九，第十三…）：
.tutors-listing > .row > .col-md-3:nth-child(4n+1) { clear: both; }
- [专业]不限制技能的行数
- [专业]没有无用的空格
- [专业]没有幻数
- [Con]每个尺寸的一个CSS规则（
xs/sm/md/lg） - [Con]规则取决于你的网格（
.col-xx-3）
[Bootply] Clearfix
在我的情况下，我想在大屏幕上显示每行3个项目，在中等屏幕上显示2个，在较小屏幕上显示1个项目。
您也可以取消注释背景颜色以validation效果是否触发。
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 */ } }
有时候，我也遇到这个问题。 我build议尝试覆盖任何你不需要的填充或边距。 尝试先将边距改为0。 然后删除一些填充。 这有助于我的一些案例。
通过它的外观，你正在渲染所有的列在一个单一的行。 你需要改变它，以便每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
