html - Bootstrap 导航栏和菜单右侧的位置 Logo

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. 请注意 Logo 位置不正确。
2. 当您将鼠标悬停在菜单 4 上时，效果是 Logo 被悬停效果覆盖。

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

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

另外，当在移动设备上查看页面时，我需要将 Logo 放置在折叠的导航栏旁边(如下所示)。

我需要设置什么适当的 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 为 Logo 留出空白空间(使用您现有的 position: absolute; right: 0。)。
• .navbar-toggle 也在那里，但隐藏在图像后面。 position:absolute； right: 75px; 把它放在正确的位置。

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

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

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

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