引导网格：如何实现这种马赛克结果？答案

【问题标题】：bootstrap grid: how to achieve this mosaic result?引导网格：如何实现这种马赛克结果？
【发布时间】：2015-12-03 11:59:10
【问题描述】：

使用bootstrap的网格，除了第一个框在lg和sm中的宽度是其他框的两倍之外，我想实现连接图像的结果。

使用 3 col-md-4 col-sm-6 col-xs-12 可以轻松复制图像的网格，但这不允许我将第一个 div 的宽度设为两倍。

我怎样才能做到这一点？非常感谢！

精度：无论高度如何，我都需要填充第一个双倍宽度框下方的剩余空间

编辑：我使用多个 col-xx-XX 几乎得到了很好的结果，但是我也有双填充。如果我完全删除双填充，我可以加入一些 div。如果我只为这 2 个左或右保留一个填充，我会在 xs 视图中得到一个额外的填充

【问题讨论】：

你看过Masonry吗？这是一个很棒的网格布局库，“根据可用的垂直空间将元素放置在最佳位置”。如果我正确理解您的问题，它应该能够帮助您实现您的目标。

标签： html css twitter-bootstrap grid

【解决方案1】：

你可以试试这样的：

  <div class="container">
<div class="row">
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:red; height: 200px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:blue; height: 400px; margin: 15px;"></div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:yellow; height: 300px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:black; height: 300px; margin: 15px;"></div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:grey; height: 200px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:green; height: 400px; margin: 15px;"></div>
  </div>
</div>

希望这能回答您的问题。 https://jsfiddle.net/87LyrLcj/1/

【讨论】：

这似乎不是一个通用的解决方案。我不能让它创建一个马赛克，其中 div 的高度是任意的。似乎高度需要完全按照指定来创建完美的马赛克。
@AndréC.Andersen 在回答这个问题时我正在使用引导程序 3。请阅读文档以获得更好的理解。 getbootstrap.com/docs/3.3/css/#grid 是的，您需要指定高度。
谢谢@BlakePaige，这可能解释了它。我的前端开发人员为我修复了它，最终在 CSS 中使用 column-count 和 @media 来处理响应性。