单击时，引导选项卡会移动

Question

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

http://gscobeats.com/

只是为了澄清，我所说的是当你进入我的网站并让整个东西加载并点击其中一个标签时，页面会产生淡入淡出的过渡效果，然后出现您选择的页面。如果您从主页单击任何选项卡，它可以正常工作。但是，如果您在其他某个选项卡上选中并尝试单击其他选项卡，则该页面会在转换开始之前执行此奇怪的收缩操作。我只是想知道是否有人知道如何解决这个问题

G-SCO

Answer 1

这是您从活动项目中删除的边框。而是将其颜色设置为透明。您也可以使用填充来适应行高变化。

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

Answer 2

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

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