Как убрать баг в bootstrap, когда между колонками образуется пустое место, равное ширине колонки?

Question

[Alexander-K]

При таком коде:

<div class="container">
	<div class="row">
		<div class="col-md-2 col-sm-4 col-xs-6">1</div>
		<div class="col-md-2 col-sm-4 col-xs-6">2</div>
		<div class="col-md-2 col-sm-4 col-xs-6">3</div>
		<div class="col-md-2 col-sm-4 col-xs-6">4</div>
		<div class="col-md-2 col-sm-4 col-xs-6">5</div>
		<div class="col-md-2 col-sm-4 col-xs-6">6</div>
	</div>
</div>

На мобильных должно быть так:
А на деле часто получается так:
Как убрать этот баг?

Comments

[Роман]

а вы случаем кастомную ширину блокам не задавали?

[Alexander-K]

Роман: нет, стили бутстрапа не менял. Внутри каждой колонки у меня находится div.item. Баг уходит, если каждому div.item задать фиксированную высоту. Но это не выход, т.к. высота должна меняться в зависимости от контента.

Answer 1

[Алексей Зуев]

Ну это же обычное поведение float:left для разной высоты элементов. Для мобильного может помочь следующий код

@media (max-width: 767px) {
  .col-xs-6:nth-child(2n+1) {
      clear: left;
  }
}

Answer 2

[WhiteSama]

колонки одной ширины должны быть, или указывать разый co-md

Comments

[Alexander-K]

WhiteSama Ширину колонкам вообще не задавал.
Внутри каждой колонки у меня находится div.item.
Баг уходит, если каждому div.item задать фиксированную высоту.
Но это не выход, т.к. высота каждого .item должна меняться в зависимости от контента.

Answer 3

[Андрей]

Если пользоваться строго инструментами bootstrap, специально для этого предназначенными, то применяйте дополнительный блок с классом .clearfix (getbootstrap.com/css/#helper-classes-clearfix)
который отображается только на определенных разрешениях - на тех, где наблюдается проблема. См. Responsive utilities (getbootstrap.com/css/#responsive-utilities)