Question

所以我正在构建一个图像引导网格。我认为使用不同尺寸的图像让它看起来更有趣会更好。较宽的图像是正常的两倍宽，较高的图像是正常的两倍高，这是为了避免网格内的空白空间。

这就是我目前所拥有的：我希望底行占据其上方的空白区域，但我无法在不手动定位的情况下弄清楚如何做到这一点，这对于在所有设备上制作阵容来说都是一场噩梦。

以下是我的代码codepen。哈巴狗（玉）：

＆＃13;

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")

＆＃13;

任何帮助都会很棒！干杯

Answer 1

试试这个，它可能不是最好的解决方案，但它似乎对我有用

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")

不同高度的Bootstrap网格行

1 个答案: