將用戶圖標移動到引導程序導航菜單中的右側

我正在使用Bootstrap創建導航菜單。當漢堡包菜單隨着視口尺寸變小而出現時，我無法將用戶圖標（具有登錄和註冊爲下拉菜單項）移動到右側並保持在右側。將用戶圖標移動到引導程序導航菜單中的右側

如果有人能告訴我如何實現這一點，我將不勝感激。 HTML代碼可以在下面的鏈接中找到。對不起，無法將代碼粘貼到此處，因爲我沒有足夠的點數來粘貼超過2個鏈接。

https://www.findtaxpro.com/content/img/menufix.html

感謝，丹

2017-08-11 Dan A.

我假設你熟悉添加破發點，以你的CSS中@media screen如果不是，它基本上是一個聲明，在什麼精確width的東西應該開始米奧雅納在你的屏幕上，在這種情況下，用戶IMG需要從左向右走，在瀏覽器窗口的一定寬度：

/* when window is smaller than 500px, the icon will move from left to right */ 

@media screen and (max-width: 500px) { 
     .user-img { 
      width: 45px; 
      float: right; 
     } 
}

你可以設置你想何時無論max-width .user-img應該切換一側。希望這可以幫助。

編輯： 從我所看到的，您的文檔設置已經照顧到突破點。因此，您需要爲您的.user-img課程添加float: right;。

.user-img { 
width: 45px; 
float: right; 
}

來源

2017-08-11 02:57:26 Crashtor

這使用戶右邊的圖標時，菜單漢堡包的中間，雖然它偶爾切換時的視口變小。我可以忍受它。謝謝。我如何始終讓用戶圖標保持在正確的位置。我在線添加了css，並且新的html代碼在這裏：https：//www.findtaxpro.com/content/img/menufix-1.html –

只需移動「」，以便它正好在'

'之上如果它幫助你，請不要忘記標記我的答案。 – Crashtor

嗨Crashtor，非常感謝您的時間。我嘗試過這個。請參閱https://www.findtaxpro.com/content/img/menufix-2.html上的示例。現在當漢堡包菜單出現時，即使漢堡包菜單和用戶圖標同時存在空間，菜單也會變得過高。有什麼建議麼？ Dan –

添加

.user-img { 
    float:right 
}

的CSS可能有助於

來源

2017-08-11 02:55:27

我意識到我的答案是有點太一般了，在編輯 –

將用戶圖標移動到引導程序導航菜單中的右側

回答

相關問題