異なる高さのブートストラップグリッド行

Question

私はイメージのブートストラップグリッドを構築しています。もっと面白く見えるように異なるサイズの画像を持つことはいいと思った。幅の広い画像は通常の2倍の幅を持ち、背の高い画像は通常の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")

すべてのヘルプは素晴らしいことです！乾杯

Answer 1

は、それが最善の解決策ではないかもしれない、これを試してみて、それはちょうど彼らが追加いけない場合でも、1 `row`に、すべての列を置く。..いけない別の行を使用し

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-lg-6.col-md-6.col-sm-12.col-xs-12.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/600x250/ff0000") 
     div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/00ff00") 
     div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/0000ff") 

     div.row.visible-lg.visible-md.hidden-sm.hidden-xs 
     div.col-lg-9.col-md-9.no-gutter  
     div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
       img.responsive(src="http://placehold.it/300x250/0000ff") 
     div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/00ff00") 

     div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/ff0000") 
     div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/ff0000") 
     div.col-lg-8.col-md-8.col-sm-12.col-xs-12.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/600x250/0000ff") 

     div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x500/00ff00") 
     div.row.hidden-lg.hidden-md.visible-sm.visible-xs 
     div.col-sm-12.col-sm-12.no-gutter  
     div.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
       img.responsive(src="http://placehold.it/300x250/0000ff") 
     div.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/300x250/00ff00") 
     div.col-sm-12.col-xs-12.no-gutter 
      div.col-sm-6.col-xs-6.no-gutter 
      div.imgContain 
       img.responsive(src="http://placehold.it/300x500/00ff00") 
      div.col-sm-6.col-xs-6.no-gutter 
      div.col-sm-12.col-xs-12.no-gutter 
       div.imgContain 
       img.responsive(src="http://placehold.it/300x250/ff0000") 
      div.col-sm-12.col-xs-12.no-gutter 
       div.imgContain 
       img.responsive(src="http://placehold.it/300x250/ff0000") 
     div.col-sm-12.col-xs-12.no-gutter 
      div.imgContain 
      img.responsive(src="http://placehold.it/600x250/0000ff")