不规则的引导列包装 [英] Irregular bootstrap column wrapping

问题描述

使用最新版本的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 
教授
％强.tutor-skills 
 = tutor.teachables 
  

然而，这个标记会导致以下故障：

我希望somenone可以解决这里的问题。在中等断点处，应该有4列均匀分布。

解决方案

这是由2行或更多文本的技巧引起的。使用 float 属性时，这是一个众所周知的错误。这里有一个小图片可以理解：

[Bootply]问题

选项＃1：强制高度

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

  .tutor {
 height：500px; 
 
 $ / code $ / pre 
 $ b $ ul 
 [ li> 
 
 [Con]使用幻数
 
 
 [Con]限制技能中的行数
 
 ] modable版本上无用的空格
 
  
 
 
   [Bootply] Force height    
 
 
选项2：使用clearfix 
 
 
 
你的第二个选择是使用一个clearfix，并强制第五个元素放在一个新行（对于第9，第13 ...）：
  .tutors-listing> .row> .col-md-3：n-child（4n + 1）{
 clear：both; 
} 
  
 
 
 
 
 
 [Pro]不限制数量
 
 [Pro]没有无用的空格
 
 
 [Pro]没有幻数
 
 
 Con]每个规模一个CSS规则（ xs / sm / md / lg ）
 
 规则取决于您的网格 
 
   [Bootply] Clearfix   
 
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:
.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.
解决方案
This is caused by skills with 2 lines of text or more. It's a well-known bug when using float property. Here is a little picture to understand :



[Bootply] The issue

Option #1 : Force the height

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


[Bootply] Force height

Option #2 : Use a 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...) :
.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)


[Bootply] Clearfix

                        
这篇关于不规则的引导列包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！