不規則的引導列包裝

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] 問題

選項#1：強制高度

您的第一個選擇是強制元素具有相同的高度：

.tutor {
    height: 500px;
}

• [Pro] 簡單，處處工作
• [Con] 使用幻數
• [Con] 限制技能行數
• [Con] modile 版本上的無用空格

[Bootply] 力的高度

選項#2：使用clearfix

您的第二個選擇是使用 clearfix，並強制第 5 個元素在一個新行上（第 9 個、第 13 個相同......）：

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

• [Pro] 不限制技能行數
• [Pro] 沒有無用的空格
• [專業] 沒有幻數
• [Con] 每個尺寸有一個 CSS 規則 ( xs/sm/md/lg )
• [Con] 規則取決於您的網格（ .col-xx-3 ）

[Bootply]清除修復

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