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

Question

在某些 CSS 导航栏布局中遇到一些困难，并将徽标定位在导航栏的右侧。

<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>

请注意徽标位置不正确。
当您悬停在菜单 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 使徽标白色 space 可以居住（与您现有的 position: absolute; right: 0。）。
.navbar-toggle 也在那里，但隐藏在图像后面。 position: absolute; right: 75px; 放在正确的位置。

注意：两者都类假设您的徽标始终为 75 像素。备选方案：

如果您使用的是 CSS 预处理器，例如 Less 或 Sass，请在此处使用变量以简化更改。
如果您使用的是流畅的徽标宽度，则可以使用百分比。我在这里演示：http://jsfiddle.net/0g9w8zza/6/。（在Fiddle中，标志宽度为20%，仍然有效；上下缩放运行window检查。

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

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

Bootstrap Navbar and Position Logo on Right Side of Menu

html

css

twitter-bootstrap

jasny-bootstrap