在 Bootstrap 选项卡中初始化 jQuery 同位素布局

我有一个带有 4 个选项卡的引导选项卡控件。我的同位素代码位于第三个选项卡内。但是，当我导航到该选项卡时，布局并未参与（所有图像都在自己的行上，而不是良好的平铺布局）。如果我调整页面大小，它将重新组织为正确的布局。

我在这里重现了这个问题。http://jsfiddle.net/Vc6Vk/ http://jsfiddle.net/Vc6Vk/

<div class="tab-pane" id="messages">
   ....isotope code here
</div>

如何使同位素参与，以便当我导航到选项卡时，它已经格式化并正确显示？

您可以使用 shown.bs.tab 事件：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $container.isotope('layout');
});

此代码将触发layout对于所有选项卡，因此您可以使用 e.target 检测选项卡，如果 e.target == 您的选项卡链接到同位素网格，则触发layout。希望这是有道理的...

http://jsfiddle.net/Vc6Vk/1/ http://jsfiddle.net/Vc6Vk/1/