砌體似乎覆蓋引導響應默認列寬

下面是一個基本的砌體例如：
https://jsfiddle.net/Smartix/n5ks39LL/砌體似乎覆蓋引導響應默認列寬

正如你所看到的，我有一個包含4」 .COL-SM一個「.masonry-包裝」行-6'divs。
因此（按照標準引導程序行爲）在xs屏幕尺寸下，4個div應該展開到100％寬度並且一個在另一個之下。基本上他們應該像4 col-xs-12 divs一樣表現！
但是，由於欄目內容很少，砌體本身決定它們的寬度應等於它們的內容！

如果你看一下小提琴，你會看到只有DIV 4級的行爲像一個真正的COL-XS-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;}

這是一個錯誤還是配置錯誤？

來源

2015-03-25 Igor Carmagna

您需要聲明您的.item樣式。

例如：

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

要爲這兩個設備的大小工作添加mobile first行爲與媒體查詢。如果窗口大小爲sm

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

但是這僅適用於： https://jsfiddle.net/nx6mjkqr/

OLD

或者你可以改變你的js代碼。

來源

2015-03-25 08:08:39 q0re

這可能是朝着正確方向邁出的一步，但是（如問題中所解釋的）我希望div的行爲與我的小提琴完全相同（對於屏幕大小> = sm），然後屏幕寬度爲100％尺寸= xs – 2015-03-25 08:17:04

基本上，我希望砌體尊重Bootstrap col大小。你能更新你的小提琴嗎？ – 2015-03-25 08:19:36

我添加了一個新的小提琴來滿足您的需求。 – q0re 2015-03-25 08:24:49

砌體似乎覆蓋引導響應默認列寬

回答

相關問題