砌體和自舉3 - 3不同大小的列

我一直在使用Bootstrap和砌體超過3-4小時，並且搜索了大量的文章，但找不到解決方案。砌體和自舉3 - 3不同大小的列

事情是這樣的：

我有引導電網，看起來像這樣：

<div class="itemsContainer"> 
    <div class="col-md-6 item"></div> 
    <div class="col-md-3 item"></div> 
    <div class="col-md-3 item"></div> 
</div>

總共有12列，沒有磚石它工作得完美。但是，只要我包括砌體，第三欄下降。

如果我把它做成6-6列或4-4-4列和3-3-3-3他們工作正常，但6-3-3不起作用。

有沒有人有解決方案嗎？任何想法如何有這個很酷的佈局？我必須執行我的流體網格嗎？爲什麼砌體與Bootstrap斷裂？

這是一個JS提琴，說明https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

來源

2015-05-25 mrGott

需要包括<div class="row">會的工作，像你想...

<div class="row"> 
    <div class="itemsContainer"> 
     <div class="col-md-6 item"></div> 
     <div class="col-md-3 item"></div> 
     <div class="col-md-3 item"></div> 
    </div> 
</div>

來源

2015-05-25 13:52:00 ccdiego5

會嘗試它並讓你知道。我不記得確切，但我想我也嘗試過。 – mrGott

它爲我所有的時間工作... – ccdiego5

我只是試過，但它沒有工作，我甚至添加了2 div class =「row」，但仍然沒有。它不適合第三欄。雖然有很多空間。無論如何，感謝您的時間和建議！ – mrGott

bootstrap Grid Example

<div class="container"> 
    <h1>Divs with same col's</h1> 
    <div class="row"> 
     <div class="col-xs-4 bg1"><p class="lead"> i'm div col-xs-4 </p></div> 
     <div class="col-xs-4 bg2"><p class="lead"> i'm div col-xs-4 </p></div> 
     <div class="col-xs-4 bg3"><p class="lead"> i'm div col-xs-4 </p></div> 
    </div> 
    <h1>Divs with differents col's</h1> 
    <div class="row"> 
     <div class="col-xs-6 bg1"><p class="lead"> i'm div col-xs-6 </p></div> 
     <div class="col-xs-3 bg2"><p class="lead"> i'm div col-xs-3 </p></div> 
     <div class="col-xs-3 bg3"><p class="lead"> i'm div col-xs-3 </p></div> 
    </div> 
</div>

這將顯示你喜歡這個：

enter image description here

來源

2015-05-26 15:31:59 ccdiego5

是的，只有Bootstrap會按照我想要的方式對齊，但在這個例子中，你只使用沒有Masonry.js或Shuffle.js或任何東西的引導程序。如果你看看我的問題，你會看到我試圖實施Masonry.js – mrGott

無論如何感謝您的時間！ – mrGott

砌體和自舉3 - 3不同大小的列

回答

相關問題