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")Любая помощь будет здорово! Приветствия
Dont использовать различные строки .. просто положить все столбцы в один 'row', даже если они не добавить до 12, и они будут настраиваться .. однако этот метод не рекомендуется. Но все же я сделал это один раз для удовлетворения требований клиента. ИЛИ Используйте фиксированные столбцы, если вы хотите избежать пустых пространств в столбце. –
Что такое col-xl-3 и col-xl-6? Я думаю, что это ошибочно, это должно быть col-lg-3 и col-lg-6. lg: large, md: medium, sm: small, xs: extra small, xl: ??? –
Я думаю, что одной строки достаточно, но когда вы хотите заставить линию прерывания, вы должны поместить новую строку. –