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：??? –
我认为一行就够了，但是当你想强制断行时，你必须放一个新行。 –