Как подружить bootstrap сетку и Masonry.js?

Question

[maksim2099]

Доброго времени суток, подскажите пожалуйста при создании сетки col-md-4 col-md-8 и применения к ней Masonry он работает хорошо. Но стоит только добавить отступы {gutter:10} сетка плывет, т.е. происходит перенос дива на следующую строку.

<div class="container">
				<div class="row">
		<div class="masonry-container">
					<div class="col-md-4 item"><img src="img/1.jpg" alt="alt"></div>
					<div class="col-md-8 item "><img src="img/3.jpg" alt="alt"></div>
					<div class="col-md-4 item "><img src="img/1.jpg" alt="alt"></div>					
					
				</div>
			</div>
		</div>

.item {
  height: 250px;
}

.item img {
  width: 100%;
  transition: transform 2s;
}

var $container=$(".masonry-container");
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector:".item",
		columnWidth: ".item", 
                gutter:10
               


	})
});
$('.item').imagefill()

Answer 1

[Назар Мокринский]

Добавляйте padding (при box-sizing: border-box, само собой)

Answer 2

[maksim2099]

Спасибо,но проблема в том, что при анимации часть Padding заполняется изображением и масштабируется плохо. Не подскажете, что можно еще предпринять в моем случае?

Comments

[Назар Мокринский]

Нужно было мне на комментарий отвечать, я бы хоть уведомление получил.
Это уже зависит от конкретной ситуации, демку бы. padding для фона можно обойти с помощью специально позиционированного псевдо-элемента, к примеру.