Bootstrap 导航栏突然坏了答案

【问题标题】：Bootstrap nav bar suddenly brokenBootstrap 导航栏突然坏了
【发布时间】：2014-02-07 05:47:43
【问题描述】：

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

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

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

谁能帮我弄清楚到底发生了什么！？！

【问题讨论】：

【解决方案1】：

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

另外，删除子 li 上的任何自定义类，你不应该需要任何...

<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;    
    }
}

您可以只使用.visible-xs，而不是使用hidden-sm hidden-md hidden-lg。

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

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

【讨论】：

【解决方案2】：

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

和text-align: left; 到相同的选择者.container > .navbar-header, .container > .navbar-collapse 但在第4448 行（@media (min-width: 768px) 之后）

上面的例子是把所有的菜单项都移到右边，但是如果你需要在一行中显示它们

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

【讨论】：