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。