bootstrap grid：如何實現這種馬賽克效果？

與自舉的網格，我想實現連接圖像的結果，除了第一個盒子在lg和sm兩倍的其他盒子的寬度。bootstrap grid：如何實現這種馬賽克效果？

使用3 col-md-4 col-sm-6 col-xs-12可以很容易地複製圖像的網格，但這不會讓我有兩倍寬度的第一個div。

我該如何做到這一點？非常感謝！

精度：我需要下面的第一個框的剩餘空間以雙寬度來填充任何高度

編輯：我幾乎一個好的結果使用多個COL-XX-XX但後來我有雙墊襯太。如果我完全刪除雙重填充，我可以加入一些div。如果我只是不停地對那些2人給出了填充或右，我得到一個微胖的XS查看

來源

2015-09-07 Sébastien

你看過[砌體]（http://masonry.desandro.com/）嗎？這是一個非常棒的網格佈局庫，「通過將元素放置在基於可用垂直空間的最佳位置上而工作」_。如果我正確理解你的問題，它應該能夠幫助你實現你的期望。 – Magnus

你可以嘗試這樣的事情：

<div class="container"> 
<div class="row"> 
    <div class="col-md-4"> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:red; height: 200px; margin: 15px;"></div> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:blue; height: 400px; margin: 15px;"></div> 
    </div> 
    <div class="col-md-4"> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:yellow; height: 300px; margin: 15px;"></div> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:black; height: 300px; margin: 15px;"></div> 
    </div> 
    <div class="col-md-4"> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:grey; height: 200px; margin: 15px;"></div> 
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:green; height: 400px; margin: 15px;"></div> 
    </div> 
</div>

希望這回答你的問題。 https://jsfiddle.net/87LyrLcj/1/

來源

2016-10-13 14:54:02

bootstrap grid：如何實現這種馬賽克效果？

回答

相關問題