自举画廊栅格

Question

我正在尝试使用引导来制作定制的图片库网格。一切进展顺利，但我坚持了最后一步。我张贴HTML结构，因为我相信它是问题在这里的某处，但我的代码包含一些css (主要是paddings/利润率)和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>

这是小提琴：http://jsfiddle.net/y6co8e5u/

目标是像这里这样的网格：网格实例

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

谢谢你帮忙！

Answer 1

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

<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);}

下面是更新的小提琴：http://jsfiddle.net/y6co8e5u/3/

没有更改js代码。

Answer 2

您需要重构您的有点，必须将

<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div> 

在<div class="col-xs-4 pd-4">内部

第二排。希望这是你想要的。检查更新的jsfiddler：http://jsfiddle.net/mayankN/y6co8e5u/1/