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>

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

目标是让网格像这里一样：Grid example

正如你在左下角看到的而不是1个水平矩形我有两个正方形，我不知道如何“连接”它们，因为它在不同的列中。这是我第一次使用bootstrap，所以它可能有点乱。（我也不确定这里是否需要我的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

您需要重新构建您的HTML，必须放

<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/

Bootstrap图库网格

2 个答案: