Кладка кажется переопределить стандартный загрузчик ширина отзывчивого колонка

Question

Ниже приведен простой пример Масонства:
https://jsfiddle.net/Smartix/n5ks39LL/

Как вы можете видеть, у меня есть строка «.masonry-обертка», которая содержит 4».col-см -6 'дивизий.
Таким образом (согласно стандартным настройкам бутстрапа) при размере экрана xs, 4 div должны расширяться до 100% ширины и складывать один под другим. В основном они должны вести себя как 4 col-xs-12 divs !!
НО, потому что столбцы имеют мало контента, масонство самостоятельно решает, что они должны иметь ширину, равную их содержимому !!

Если посмотреть на скрипку, вы увидите, что только DIV 4 ведет себя как истинный Col-хз-12 (так как он имеет строку текста достаточно долго)

HTML:

<div class="container"> 
<div class="row masonry-wrapper"> 
    <div class="col-sm-6 item bc1"> 
     <p>Div 1</p> 
    </div> 
    <div class="col-sm-6 item bc2"> 
     <p>Div 2</p> 
     <p>Div 2</p> 
     <p>Div 2</p> 
     <p>Div 2</p> 
    </div> 
    <div class="col-sm-6 item bc3"> 
     <p>Div 3</p> 
    </div> 
    <div class="col-sm-6 item bc4"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed hendrerit nisi. Donec vehicula magna eu tellus bibendum vehicula. Fusce tempus tellus purus, sed porta. 
     </p> 
    </div> 

</div> 
</div> 

JS:

var $container = $('.masonry-wrapper'); 
$container.masonry({itemSelector: '.item'}); 

CSS:

.bc1 {background-color: #00bfb2;} 
.bc2 {background-color: #de9800;} 
.bc3 {background-color: #ff69da;} 
.bc4 {background-color: #38ff59;} 

Является ли это ошибкой или неправильной конфигурацией?

Answer 1

Вам необходимо объявить свой стиль .item.

, например:

.item { width: 50%; } // 50% is equal to col-sm-6 

Для работы для обоих размеров устройства добавить mobile first поведение с запросами средств массовой информации. https://jsfiddle.net/nx6mjkqr/

OLD

В качестве альтернативы вы можете изменить свой код JS для:

$container.masonry({itemSelector: '.col-sm-6'}); 

Но это работает только, если размер окна sm.