Bootstrap导航栏突然崩溃

Question

我试图修复我的网站的另一个元素，同时设法打破了我的bootstrap导航栏。

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

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

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

http://brucennial.com/v3main.html

Answer 1

在/css/v3_bootstrap.css:4440

和text-align: left;添加text-align: right;到.container > .navbar-header, .container > .navbar-collapse到相同slectors .container > .navbar-header, .container > .navbar-collapse但在线路4448（AFER @media (min-width: 768px)）

上面的例子是移动所有菜单项到右侧，但是如果需要将它们显示在一条线上

1. 设置display: inline为.nav > li上线4096和.nav > li > a于4101
2. 加放.nav > li a, .nav > li > a与display: block;内@media (min-width: 768px)部分

Answer 2

你只需要使用内置.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。

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

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