javascript - Bootstrap 画廊网格

Question

我正在尝试使用 Bootstrap 制作自定义图库网格。一切顺利，但我停留在最后一步。我正在发布 HTML 结构，因为我相信这是这里某个地方的问题，但我的代码包含一些 css(主要是填充/边距)和 JS(在下面解释原因)。

HTML:

<div class="about_gallery">
  <div class="col-xs-9 pd-9">
  <div class="row">
      <div class="col-xs-8 pd-8">
        <div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
      </div>
      <div class="col-xs-4 pd-4">
        <div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
      </div>  
  </div>
  <div class="row">
      <div class="col-xs-4 pd-4">
        <div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
          <div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>         

      </div>
      <div class="col-xs-8 pd-8">
        <div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
        <div class="row">
            <div class="col-xs-6 cl-5">
              <div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
              <div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div> 
            </div>
            <div class="col-xs-6 cl-6">
              <div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
            </div>  
        </div>
      </div>
  </div>

  </div>

  <div class="col-xs-3 pd-3">
      <div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
      <div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
      <div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
  </div>
</div>

这是 fiddle :http://jsfiddle.net/y6co8e5u/

目标是像这里这样的网格:Grid example

正如您在左下角看到的，而不是 1 个水平矩形，我有两个正方形，我不知道如何“连接”它们，因为它们位于不同的列中。这是我第一次使用 Bootstrap ，所以它可能有点乱。 (我也不确定这里是否需要我的 JS，但是当我在图片之间添加空格时，我需要扩展图片)我也愿意接受任何其他解决方案。

感谢您的帮助!

Answer 1

我假设您正在尝试添加 .color7 div，将其附加到 <div class="col-xs-4 pd-4"> , 就在 .color3 之后堵塞。该 block 将如下所示:

<div class="col-xs-4 pd-4">
    <div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
    <div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>

然后在 css 上设置 .color7 {width: calc(200% + 10px);}

这是更新后的 fiddle :http://jsfiddle.net/y6co8e5u/3/

js代码没有变化。