Нержавеющая обертка колонны бутстрапа

Running Rails 4.1.4 с последними версиями haml, haml-rails, sass и bootstrap-sass. Для пользовательского дисплея моя 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

Однако эта разметка приводит к следующему сбою:

Я надеюсь, что somoneone может определить, что здесь не так. В средней точке останова должно быть равно 4 столбца.

Ответ 1

Это вызвано навыками с 2 строками текста или более. Это известная ошибка при использовании свойства float. Вот небольшая картина для понимания:

[Bootply] Проблема

Вариант №1: Настроить высоту

Ваш первый вариант - заставить элементы иметь одинаковую высоту:

.tutor {
    height: 500px;
}

[Pro] Простой и работающий везде
[Con] Используйте магическое число
[Con] Ограничить количество строк в навыках
[Con] Бесполезные пробелы в модифицированной версии

[Bootply] Force height

Вариант № 2: используйте clearfix

Второй вариант - использовать clearfix и заставить пятый элемент находиться на новой строке (то же самое для 9-го, 13-го...):

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

[Pro] Не ограничивает количество строк в навыках
[Pro] Нет бесполезных пробелов
[Pro] Нет магического номера
[Con] Одно правило CSS для каждого размера (xs/sm/md/lg)
[Con] Правило зависит от вашей сетки (.col-xx-3)

[Bootply] Clearfix

Ответ 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 */
    }
}

Ответ 3

Иногда я сталкиваюсь с этой проблемой. Я рекомендую попробовать перезаписать любые дополнения или поля, которые вам НЕ нужны. Сначала попробуйте изменить маржу на 0. Затем удалите часть прокладки. Это помогло в некоторых из моих дел.

Ответ 4

По внешнему виду вы представляете все столбцы в одной строке. Вы должны изменить его так что он запускает новую строку каждые 4 столбца, т.е. (в простой старой версии)

  <% @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 в первом цикле