2
所以我建立圖像的引導網格的網格自舉行。我認爲這將是不錯的，有不同大小的圖像，使其看起來更有趣。較寬的圖像是正常寬度的兩倍，較高的圖像是正常高度的兩倍，這是爲了避免網格內的空白空間。不同高度
這是我目前有： 
我想最下面一行佔據其上方的空的空間，但我無法弄清楚如何做到這一點，而無需手動定位它，這將是一場噩夢，使所有設備上的陣容。
這裏是一個codepen以及我的代碼。 和攪拌（玉）：
html
head
title Grid Test
link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous")
link(rel="stylesheet" href="css/style.css" type="text/css")
body
div.container-fluid
div.row
div.col-xl-6.col-md-6.col-sm-12.col-xs-12.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/600x250/ff0000")
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/00ff00")
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/0000ff")
div.row
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/0000ff")
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/00ff00")
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/ff0000")
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x500/00ff00")
div.row
div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/300x250/ff0000")
div.col-xl-6.col-md-6.col-sm-12.col-xs-12.no-gutter
div.imgContain
img.responsive(src="http://placehold.it/600x250/0000ff")任何幫助將是巨大的！乾杯
不要使用不同的行..只是把你的所有列到一個'row'即使他們不加高達12，他們會調整..但是這種方法不建議。但是，我仍然這樣做了一次，以滿足客戶的要求。或者如果您想避免列中有空格，請使用固定列。 –
什麼是col-xl-3和col-xl-6？我認爲這是錯誤的，它應該是col-lg-3和col-lg-6。 lg：大， md：medium， sm：小， xs：超小， xl：??? –
我認爲一行就夠了，但是當你想強制斷行時，你必須放一個新行。 –