在引导导航菜单中将用户图标向右移动

Posted 2023-05-08

【中文标题】在引导导航菜单中将用户图标向右移动

【英文标题】：Move the user-icon to the right in bootstrap navigation menu

【发布时间】：2018-01-19 10:34:18

【问题描述】：

我正在使用 Bootstrap 创建导航菜单。我无法将用户图标（具有登录名并注册为下拉菜单项）向右移动并在汉堡菜单出现时保持在右侧，因为视口尺寸变小。

如果有人能告诉我如何实现这一点，我将不胜感激。 html 代码可以在下面的链接中找到。抱歉，无法在此处粘贴代码，因为我没有足够的积分来粘贴超过 2 个链接。

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

谢谢， 丹

【参考方案1】：

我假设你熟悉在 @media screen 中添加断点到你的 CSS , user-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 何时切换。希望这会有所帮助。

编辑： 据我所知，您的文档设置已经处理了断点。因此，您只需将 float: right; 添加到您的 .user-img 课程中即可。

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

【讨论】：

当菜单是汉堡包时，这会将用户图标向右移动，尽管当视口变小时它偶尔会切换。我可以忍受它。谢谢。如何让用户图标始终保持在右侧。我添加了 css in-line，新的 html 代码在这里：findtaxpro.com/content/img/menufix-1.html

只需将<a href="#" class="navbar-brand user-img" data-toggle="dropdown" aria-expanded="false"></a> 移动到<div class="navbar-collapse navbar-right collapse id="defaultNavbar1 aria-expanded="false" style="height: 1px"></div> 的正上方，如果对您有帮助，请不要忘记将我的答案标记为正确！

嗨 Crashtor，非常感谢您抽出宝贵时间。我尝试过这个。请参阅findtaxpro.com/content/img/menufix-2.html 的示例。现在，当汉堡菜单出现时，即使汉堡菜单和用户图标有空间位于同一行，菜单也会变得太高。有什么建议？丹

谢谢，Crashtor。在您的输入和另一个名字为 Ehsan 的人的输入之间，我能够修复它。我找不到 Ehsan 的答案，所以无法感谢他。我将用户图标代码拉到导航栏标题之外。我在用户图标菜单的下拉列表中添加了“class=pull-right”，并且还减少了菜单选项以避免菜单项和用户图标之间的中断。我已经达到了我想要的结果。感谢你和 Ehsan。你可以在findtaxpro.com/content/img/menufix-ehsan-1.html看到最终代码。

太好了，很高兴它有帮助！

【参考方案2】：

添加

.user-img 
    float:right

CSS 可能会有所帮助

【讨论】：

我意识到我的回答有点过于笼统，正在编辑中