Bootstrap 导航栏和菜单右侧的位置徽标

Question

在一些 CSS 导航栏布局和将 logo 定位在导航栏的右侧有点挣扎。

Fiddle.

<div class="container-fluid">
        <div class="navbar navbar-fixed-top navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand pull-right" href="#">
                    <img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2010/05/BP-Redesign-Contest-4-75x75.jpg" alt="Alternate Text for Image" >
                </a>

                <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
                    <a class="navmenu-brand" href="#">eServices</a>
                    <ul class="nav nav-justified">
                        <li><a href="index.html">Menu 1</a></li>
                        <li><a href="index.html">Menu 2</a></li>
                        <li><a href="index.html">Menu 3</a></li>
                        <li><a href="index.html">Menu 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

1. 请注意徽标位置不正确。
2. 当您将鼠标悬停在菜单 4 上时，效果是徽标被悬停效果覆盖。

我想要完成的是类似这样的事情：

请注意，徽标位于导航菜单项之外，因此当我将鼠标悬停在菜单上时，徽标不会被覆盖。

另外，当在移动设备中查看页面时，我需要将徽标定位在折叠的导航栏（如下所示）旁边。

我需要设置什么合适的 css（或 html 标签）来获得这个？已经为此苦苦挣扎了一段时间。

谢谢。

更新：fiddle 必须在 Chrome 上查看（不知道为什么 FF 不证明导航项是正确的）。

Answer 1

我认为我得到了你想要的效果。 http://jsfiddle.net/0g9w8zza/4/。添加了以下内容：

.nav {
    padding-right: 75px;
}

.navbar-toggle {
    position: absolute;
    right: 75px;
    top: 0;
}

添加了两件事：

• 发生悬停状态问题是因为菜单技术上一直延伸到右侧。添加 padding-right 为徽标提供了居住的空白空间（使用您现有的position: absolute; right: 0。）。
• .navbar-toggle 也在那里，但隐藏在图像后面。 position: absolute; right: 75px; 把它放在正确的位置。

注意：这两个类都假定您的徽标始终为 75 像素。替代方案：

• 如果您使用的是 CSS 预处理器，如 Less 或 Sass，请在此处使用变量以使更改更容易。

• 如果您使用流畅的徽标宽度，您可以使用百分比。我在这里演示：http://jsfiddle.net/0g9w8zza/6/。 （在 Fiddle 中，徽标宽度为 20%，它仍然有效；上下缩放运行窗口进行检查）。

（如果这不能解决您的问题，请告诉我，我很乐意重新访问）。