bootstrap 导航条折叠摆动效果

Question

我的导航栏在折叠时出现问题，因为当我单击我的汉堡包按钮时，我的列表在显示时有一个奇怪的摆动效果。

这是css代码：

.navbar-header{float:none}
a.navbar-brand{float:none}
img.brand{display:block;margin-left:auto;margin-right:auto;text-align:center;width:47%}
.collapse.navbar-collapse{float: none;text-align: center;padding-left:4%;padding-right: 4%}
.collapse.navbar-collapse ul{float: none;display: inline-block}

如果有人想看，这里是link：

http://chickapea.larchedigitalmedia.com/

提前致谢

Answer 1

您在原生 bootstrap classes 上拥有所有自定义样式。这会导致东西破裂。我认为你的 "swinging" 是因为你的 text-align: center; class 在你的 .collapse class 上。单击汉堡包按钮时 .collapse class 消失，因此 .collapse class 上的所有属性也会消失。

在元素上创建自定义 classes 并将 CSS 应用于自定义 classes 与 bootstrap classes。