Bootstrap导航栏突然坏了

Question

我试图以某种方式破坏我的引导导航条，同时尝试修复我网站的另一个元素。

我无法弄清楚我做了什么来改变导航？它应该是一行中的，文本元素向左浮动，社交图标向右浮动。 （应该看起来像什么的图像在顶部）

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

任何人都可以帮我弄清楚到底发生了什么！？！

http://brucennial.com/v3main.html

Answer 1

您只需要在.navbar-left上使用内置的.navbar-right和.navbar-nav课程。不要创造你自己的......

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

DEMO

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

将移动视图右侧的链接对齐....

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

您可以使用hidden-sm hidden-md hidden-lg。

，而不是使用.visible-xs

从您的＆＃34;社交图标＆＃34>中删除hidden-xs li并将其添加到父navbar-nav。

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

Answer 2

将text-align: right;添加到/css/v3_bootstrap.css:4440中的.container > .navbar-header, .container > .navbar-collapse

和text-align: left;指向相同的选民.container > .navbar-header, .container > .navbar-collapse，但在第4448行（@media (min-width: 768px)}

上面的示例是将所有菜单项移到右侧，但是如果您需要将它们显示在一行中

1. 在第4096行为display: inline设置.nav > li，在4101设置.nav > li > a
2. 在.nav > li a, .nav > li > a部分
中添加display: block; @media (min-width: 768px)