Html 不规则的引导列包装
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25598728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Irregular bootstrap column wrapping
提问by Beno?t
Running Rails 4.1.4 with the latest releases of haml, haml-rails, sass, and bootstrap-sass. For a user display, my HAML is as such:
使用最新版本的 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
However, this markup results in the following glitch:
但是，此标记会导致以下故障：
I'm hoping somenone can devine what's wrong here. At the medium breakpoint, there should be 4 columns evenly.
我希望有人能弄清楚这里出了什么问题。在中断点处，应均匀分布 4 列。
回答by zessx
This is caused by skills with 2 lines of text or more. It's a well-known bug when using floatproperty. Here is a little picture to understand :
这是由具有 2 行或更多文本的技能引起的。这是使用float属性时的一个众所周知的错误。这是一个小图来理解：
Option #1 : Force the height
选项#1：强制高度
Your first option is to force elements to have the same height :
您的第一个选择是强制元素具有相同的高度：
.tutor {
height: 500px;
}
- [Pro] Simple and work everywhere
- [Con] Use a magic number
- [Con] Limit the number of lines in skills
- [Con] Useless whitespaces on modile version
- [Pro] 简单，处处工作
- [Con] 使用幻数
- [Con] 限制技能行数
- [Con] modile 版本上的无用空格
Option #2 : Use a clearfix
选项#2：使用clearfix
Your second option is to use a clearfix, and force the 5th element to be on a new line (same for the 9th, the 13th...) :
您的第二个选择是使用 clearfix，并强制第 5 个元素在一个新行上（第 9 个、第 13 个相同......）：
.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
clear: both;
}
- [Pro] Doesn't limit the number of lines in skills
- [Pro] No useless whitespaces
- [Pro] No magic number
- [Con] One CSS rule per size (
xs/sm/md/lg) - [Con] The rule depends of your grid (
.col-xx-3)
- [Pro] 不限制技能行数
- [Pro] 没有无用的空格
- [专业] 没有幻数
- [Con] 每个尺寸一个 CSS 规则 (
xs/sm/md/lg) - [Con] 规则取决于您的网格 (
.col-xx-3)
回答by CocaLeaf
In my case I wanted to show 3 items per row on large screens, 2 on medium screens, and 1 on smaller screens.
就我而言，我想在大屏幕上每行显示 3 个项目，在中屏幕上显示 2 个项目，在小屏幕上显示 1 个项目。
You may also uncomment the background colors to verify when the effect is triggering.
您还可以取消注释背景颜色以验证何时触发效果。
http://www.bootply.com/QOor73wFAY#
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 */
}
}
回答by Zackery Gianotti
Sometimes, I run into this issue as well. I recommend trying to overwrite any padding or margin that you do NOT need. Try changing the margin to 0 first. Then remove some of the padding. That has helped in some of my cases.
有时，我也会遇到这个问题。我建议尝试覆盖您不需要的任何填充或边距。首先尝试将边距更改为 0。然后去除一些填充物。这对我的一些情况有所帮助。
回答by ob264
By the looks of it you are rendering all of the columns in a single row. You need to change it so that it starts a new row every 4 columns i.e. (in plain old erb)
从它的外观来看，您将所有列呈现在一行中。您需要更改它，以便它每 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 %>
You might not need the to_a on the first loop
您可能不需要第一个循环中的 to_a
