Bootstrap是最广泛采用的开源前端框架之一。 将Bootstrap包含在您的项目中，您将能够立即生成响应式网页。 如果您尝试将Masonry与Bootstrap Tabs小部件（Bootstrap必须提供的众多JavaScript组件之一）一起使用，那么您可能会偶然发现了某种令人讨厌的行为。

在砌体网站上 ，我们看到砌体是……

JavaScript网格布局库。 它通过根据可用的垂直空间将元素放置在最佳位置来工作，就像砌墙的石匠一样。

我做到了，本文重点介绍了问题所在以及可以解决的方法。

引导选项卡介绍

Bootstrap选项卡组件包括两个关键的相关部分：一个选项卡式导航元素和多个内容面板。 在页面加载时，第一个面板上应用了.active类。 这使面板默认情况下可见。 通过JavaScript使用此类，可通过选项卡式导航链接触发的事件来切换面板的可见性：如果存在.active ，则面板可见，否则面板被隐藏。

如果您有一些最好以单独的块呈现的Web内容，而不是一网打尽，Bootstrap选项卡组件可能会派上用场。

为什么要砌石？

在某些情况下，每个面板内的内容都适合在响应式网格布局中显示。 例如，一系列产品，服务和投资组合项目是可以以网格格式显示的内容类型。

但是，如果网格单元的高度不同，则可能会发生以下情况。

较大的间隙将两行内容分隔开，并且布局似乎已损坏。

如今，Bootstrap通过基于Flexbox的全新卡组件解决了等宽问题。 仅将card-deck 类添加到一组卡组件中就足以实现等宽列。

如果您希望卡片的长度不均匀，则可以使用CSS3多列布局 。 （毕竟，即使存在一些浏览器支持错误，总的来说还是不错的。）这是card组件随附的新card column选项的基础。 但是，如果您仍然喜欢Masonry JavaScript库提供的精美动画以及其广泛的浏览器兼容性，那么在这种情况下，JavaScript仍然是可行的选择。

设置演示页面

启动并运行演示页面有助于说明如何将Bootstrap Tabs与Masonry集成起来并不像人们期望的那么简单。

本文的演示页面基于Bootstrap网站上提供的入门模板 。

以下是“引导程序”选项卡组件的标记的框架：

<ul class="nav nav-tabs" id="myTab" role="tablist"><!-- nav item 1 --><li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li><!-- nav item 2 --><li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li><!-- nav item 3 --><li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>

nav nav-tabs类负责赋予选项卡其独特的外观。 href属性的值形成单个选项卡及其对应的选项卡式内容之间的关系。 例如， href值为#home会与带有id="home"的选项卡式内容创建关系：单击该特定选项卡将显示id为home的div的内容。

另外，请注意Bootstrap如何注意可访问性属性，例如role ， aria-controls等。

以下代码段说明了选项卡式内容的结构：

<!-- content 1 -->
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><h3>Tab 1 Content</h3>
<div class="card-group"><!-- first card --><div class="card"><img class="card-img-top" src="path/to/img" alt="Card image cap"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Card text here.</p><p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p></div></div><!-- second card --><div class="card"><!-- card markup here --></div&lgt;<!-- third card --><div class="card"><!-- card markup here --></div></div>
</div>

只需为每个选项卡式内容部分添加与您上面编码的选项卡元素相对应的类似结构即可。

有关完整代码，请查看CodePen演示 。

添加砌体库

您可以通过单击下载masonry.pkgd.min.js按钮从官方网站下载Masonry 。

为了避免布局问题，该库的作者建议将Masonry与imagesLoaded插件一起使用。

石工不需要jQuery库即可工作。 但是，由于Bootstrap JavaScript组件已经使用jQuery，因此我将为自己简化生活，并以jQuery方式初始化Masonry。

这是使用jQuery和imagesLoaded初始化Masonry的代码片段：

var $container = $('.masonry-container');
$container.imagesLoaded( function () {$container.masonry({columnWidth: '.card',itemSelector: '.card'});
});

上面的代码缓存div ，该div将所有卡元素包装在一个名为$container的变量$container 。

接下来，使用几个推荐的选项在$container上初始化Masonry。 columnWidth选项指示水平网格的列的宽度。 在这里，使用类别名称将其设置为单个卡片项目的宽度。 itemSelector选项指示哪些子元素将用作项目元素。 在这里，它也设置为单个卡片项目。

现在该测试代码了。

糟糕！ 隐藏面板怎么了？

在不使用“引导程序选项卡”的网页上，上面的代码就像一个超级按钮一样工作。 但是，在这种情况下，您很快就会意识到一种有趣的行为发生了。

首先，这看起来不错，因为正确显示了默认活动选项卡面板中的网格：

但是，如果单击选项卡式导航链接以显示隐藏面板的内容，则会发生以下情况：

窥视源代码可以发现Masonry已经按预期方式开火了，但是每个物品的位置都没有正确计算：网格物品都像一副纸牌一样堆叠在一起。

不仅如此。 调整浏览器窗口的大小会使网格项目正确定位。

让我们修复布局错误

由于单击选项卡式导航链接后会出现意外的布局错误，因此让我们更仔细地研究Bootstrap选项卡引发的事件。

事件列表很短。 这里是。

• show.bs.tab在选项卡显示时触发，但在显示新选项卡之前
• 显示标签后， bs.tab会在标签显示上触发
• 当显示一个新标签时， hide.bs.tab会触发（因此，前一个活动标签将被隐藏）
• 在显示新标签页后， hidden.bs.tab会触发（因此，先前的活动标签页将被隐藏）。

由于在显示选项卡后砌体布局会混乱，因此请进入shown.bs.tab事件。 这是代码，您可以将其放在上一个代码片段的正下方：

$('a[data-toggle=tab]').each(function () {var $this = $(this);$this.on('shown.bs.tab', function () {$container.imagesLoaded( function () {$container.masonry({columnWidth: '.card',itemSelector: '.card'});   });  });
});

这是上面的代码中发生的事情：

jQuery .each()函数在每个选项卡式导航链接上循环并侦听shown.bs.tab事件。 当事件触发时，面板将变为可见状态，并且在完成所有图像的加载后将重新初始化石工。

测试代码

如果您一直在遵循，请在浏览器中启动演示，或尝试下面的CodePen演示以查看结果：

请参阅CodePen上的SitePoint （ @SitePoint ）的笔引导选项卡和砌体 。

单击选项卡式导航链接，然后注意这次网格项目如何均匀地放入每个内容面板中。 调整浏览器的大小可使项目正确地重新定位，并具有良好的动画效果。

就是这样，工作完成了！

结论

在本文中，我展示了如何将Bootstrap Tabs组件与Masonry JavaScript库集成在一起。

这两个脚本都易于使用且功能强大。 但是，将它们放在一起，您将遇到一些讨厌的布局错误，这些错误会影响隐藏的选项卡。 如上所示，诀窍是在每个面板可见后重新初始化Masonry库。

使用工具箱中的此解决方案，轻松实现出色的平铺布局将非常容易。

引导愉快！

如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的使用Bootstrap 4建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

From: https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/