Bootstrap 是最流行的前端框架之一。在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页。
如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的 选项卡组件 一起使用，你将会发现许多讨厌的行为。
我遇到过，而本文主要关注这个问题是什么和你要如何来解决这个问题。
Bootstrap的Tabs
Bootstrap的选项卡组件包括两个关键点：选项卡导航元素和一些内容面板。在页面加载时，第一个面板应用了 .active 类。使这个面板默认是可见的。这个类是通过使用JavaScript来切换面板的可见性,通过选项卡导航触发的事件：如果这个面板现在拥有 .active 类那它是可见的，否则这个面板就是隐藏的。
如果你有一些网页内容最好是在单独的块中而不是挤在一个地方，那这种选项卡组件可能派上用场。
为什么是Maronry?
在一些情况下，在每个面板内的内容是适合被显示在响应式的网格布局内的。例如，一系列的商品，服务和文件夹项目都是可以被显示在网格格式内的内容类型。
然而，如果网格的格子不是相同的高度，那像如你所看到的下面的情况将会发生。
两行之间被一些大的间距撑开，使布局看上去好难看。
这就是Masonry解决问题的时候了。加一些Masonry功能到这个混乱的布局中，然后你的布局会动态的适应屏幕的实际面积，消除所有损坏布局的空白间距。
设置DEMO页面
制作一个示例页面用来展示如何整合Bootstrap的标签页和Masonry并不像期望的那么简单。
本文的演示案例 是基于在Bootstrap网站上可用的 制作的
每个在选项卡面板中的网格项目都是用 和 建立的。这里是一个代码片段来解释它的结构：
<div> <div> <img src="https://lorempixel.com/200/200/abstract" alt=""> <div> <h3>Thumbnail label</h3> <p>...</p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> <!-- Repeat two more times ... -->
上面的代码创建了一个在大型屏幕上为三列，在小型屏幕上为两列的网格。如果你需要复习一下Bootstrap的网格系统，Syed Fazle Rahman写的理解Bootstrap的网格系统是一篇很好的 文章 。
示例页面中的选项卡组件有如下的HTML结构：
<div role="tabpanel"> <!-- Nav tabs --> <ul role="tablist"> <li role="presentation"> <a href="#panel-1" aria-controls="panel-1" role="tab" data-toggle="tab">Panel 1</a> </li> <li role="presentation"> <a href="#panel-2" aria-controls="panel-2" role="tab" data-toggle="tab">Panel 2</a> </li> <li role="presentation"> <a href="#panel-3" aria-controls="panel-3" role="tab" data-toggle="tab">Panel 3</a> </li> <li role="presentation"> <a href="#panel-4" aria-controls="panel-4" role="tab" data-toggle="tab">Panel 4</a> </li> </ul> <!-- Tab panels --> <div> <div role="tabpanel"> <div> <div> <!-- Thumbnail goes here --> </div> <div> <!-- Thumbnail goes here --> </div> <div> <!-- Thumbnail goes here --> </div> ... </div><!--End masonry-container --> </div><!--End panel-1 --> <div role="tabpanel"> <!-- Same as what goes inside panel-1 --> </div><!--End panel-2 --> ... </div><!--End tab-content --> </div><!--End tabpanel -->
这里有一些关于上面代码片段的注意事项：
HTML注释指出了选项卡的关键部件： Nav tabs 标志选项卡的导航部分， Nav panels 标志着内容面板。
选项卡的链接通过它们 href 属性的值连接到相应的 id 属性的值相同的内容面板。例如，有着 href="#panel-1" 的链接打开有着 id=panel-1 的内容面板。
在导航部分的每个锚标签都包含 data-toggle="tab" .这个标记使选项卡组件工作而无需写任何额外的JavaScript.
Masonry的目标元素需要有 .masonry-container 类，这个类适用于包含所有网格项目的包装器 div 元素，还需要应用于每单个网格项目的 .item 类。
要看到Masonry库的全部威力，一定要确保网格项目有不同的高度。例如，删除一个项目的图片，缩短另一个项目的段落，等等。
完整的代码，请在CodePen中查看示例的代码 。
添加Masonry库
你可以在 Masonry官网 上通点击”Download“ 按钮下载 masonry.pkgd.min.js 。
为了避免布局问题，库的作者推荐将Masonry与imagesLoaded 插件 一起使用。
Masonry不需要 jQuery 。但是因为Bootstrap的JavaScript组件已经在使用jQuery，以jQuery的方式初始化Masonry我将会使我自己的生活更加美好。
这是我们用jQuery和imagesLoaded初始化Masonry需要的代码段。
var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); });
上面的代码将包裹所有网格项目的 div 存储在一个叫 $container 的变量中。