将Bootstrap导航菜单中的用户图标移动到右侧

Question

将Bootstrap导航菜单中的用户图标移动到右侧

jqueryhtmlcsstwitter-bootstrapnavbar

3

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

我希望有人能向我展示如何实现这一目标。 HTML代码可以在以下链接中找到。对不起，由于我没有足够的积分粘贴超过2个链接，所以无法在此处粘贴代码。

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

谢谢，丹

- Dan A.

2个回答

0

添加

.user-img {
    float:right
}

对 CSS 进行调整可能会有帮助

- Anthony Wood

我意识到我的回答有点太笼统了，正在编辑中。 - Anthony Wood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Crashtor · Accepted Answer

我假设您已经熟悉如何在CSS中添加断点，例如@media screen。如果不熟悉，它基本上是一个声明，确定屏幕的精确width，在此情况下，用户图像需要在浏览器窗口的特定宽度下从左到右移动：

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