引导选项卡在单击时移动答案

【问题标题】：Bootstrap tabs move when clicked引导选项卡在单击时移动
【发布时间】：2013-10-18 15:52:44
【问题描述】：

我的网站似乎遇到了一个奇怪的问题。当我在主页上然后单击其中一个选项卡时，它可以正常工作。一旦我尝试从其他选项卡之一单击到另一个选项卡（在我的示例中，从新闻到 Beats，从 Beats 到新闻，从新闻到主页以及从 Beats 到主页），选项卡的内容就会移动/移动一秒钟，然后切换。它从来没有这样做过，它似乎只是突然开始这样做。我只是想知道是否有其他人遇到过这个问题，或者是否有人知道解决方案。这是我网站的链接：

http://gscobeats.com/

澄清一下，我要说的是，当您访问我的网站并让整个内容加载并单击其中一个选项卡时，页面会产生淡入淡出的过渡效果，然后您选择的页面就会出现。如果您从主页单击任何选项卡，它都可以正常工作。但是，如果您在其他选项卡之一上被选中，并且您尝试单击不同的选项卡，则页面会在转换开始之前执行此奇怪的缩小操作。我只是想知道是否有人知道如何解决这个问题

G-SCO

【问题讨论】：

使用 chrome，它工作正常。你用的是哪个浏览器？
我也使用 chrome。我在我的 iPhone 上尝试了 safari，它也做了同样的事情。也许我没有正确解释我的问题。我所说的是当您访问我的网站并让整个内容加载并单击其中一个选项卡时，该页面会产生淡入淡出的过渡效果，然后您选择的页面就会出现。如果您从主页单击任何选项卡，它都可以正常工作。但是，如果您在其他选项卡之一上被选中，并且您尝试单击不同的选项卡，则页面会在转换开始之前执行此奇怪的缩小操作。我只是想知道是否有人知道如何解决这个问题

标签： javascript html css twitter-bootstrap tabs

【解决方案1】：

这是您要从活动项目中移除的边框。相反，将其颜色设置为透明。您还可以调整填充以适应行高变化。

.nav-tabs > .active > a {border: 1px solid transparent;}

【讨论】：

感谢您的快速回复。这实际上非常有帮助，但也许我没有正确解释我的问题。我所说的是当您访问我的网站并让整个内容加载并单击其中一个选项卡时，该页面会产生淡入淡出的过渡效果，然后您选择的页面就会出现。如果您从主页单击任何选项卡，它都可以正常工作。但是，如果您在其他选项卡之一上被选中，并且您尝试单击不同的选项卡，则页面会在转换开始之前执行此奇怪的缩小操作。我只是想知道是否有人知道如何解决这个问题

【解决方案2】：

问题似乎在于，在您的标签内容中，您使用的 span12 元素没有容器 .row 或 .row-fluid 元素（这是引导程序网格系统的重要组成部分），特别是您需要该容器，因为它为浮动的span 元素提供了一个clearfix，但如果你不想改变你的标记，你可以将它添加到你的CSS：

.tab-pane:after {
    content: '';
    clear: both;
    display: table;
}

【讨论】：