css - Bootstrap 导航栏突然坏了

Question

在尝试修复我网站的另一个元素时，我设法以某种方式破坏了我的 Bootstrap 导航栏。

我不知道我做了什么来改变导航？它应该全部在一行中，文本元素向左浮动，社交图标向右浮动。 (它应该看起来像什么的图像在顶部)

当菜单折叠成一个图标时，菜单项应该全部右对齐。

谁能帮我弄清楚这到底是怎么回事!？!

http://brucennial.com/v3main.html

Answer 1

您只需要在 .navbar-nav 上使用内置的 .navbar-left 和 .navbar-right 类即可秒。不要创建自己的...

此外，删除子 li 上的所有自定义类，您不需要任何...

DEMO

<ul class="nav navbar-nav navbar-left">
    //Colored links
</ul>
<ul class="nav navbar-nav navbar-right">
    //social icons
</ul>

在移动 View 中将链接右对齐....

@media (max-width: 768px){
    .navbar-nav li{
        text-align: right;    
    }
}

除了使用hidden-sm hidden-md hidden-lg，你还可以使用.visible-xs。

从“社交图标”li 中删除 hidden-xs 并将其添加到父级 navbar-nav。

如果您打算使用 Bootstrap，请不要直接编辑 Bootstrap CSS，只需覆盖您自己的样式表中的样式即可。您可以使用 Customizer