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>

1. 請注意徽標放置不正確。
2. 將鼠標懸停在菜單4上時，效果是徽標被懸停效果覆蓋。

我要完成的工作與此類似：

請注意，徽標位於導航菜單項的外部，因此當我將鼠標懸停在菜單上時，徽標不會被覆蓋。

另外，當在移動設備中查看頁面時，我需要將徽標放置在折疊的導航欄旁邊（如下所示）。

我需要設置什么適當的CSS（或html標記）才能獲得此？ 已經為此花了很長時間了。

謝謝。

更新：必須在Chrome上查看小提琴 （不確定FF為什么不能證明導航項目的合理性）。

Answer 1

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

.nav {
    padding-right: 75px;
}

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

添加了兩件事：

• 發生懸停狀態問題是因為菜單在技術上一直一直擴展到右側。 向右添加padding會給徽標留出空白（您現有的position: absolute; right: 0 ）。
• .navbar-toggle也在那里，但隱藏在圖像后面。 position: absolute; right: 75px; 將其放置在正確的位置。

注意：這兩個類均假定您的徽標始終為75像素。 替代方案：

• 如果您使用的是CSS預處理器（如Less或Sass），請在此處使用變量以使更改更容易。

• 如果您使用可變的徽標寬度，則可以使用百分比。 我在這里演示了這一點： http : //jsfiddle.net/0g9w8zza/6/ 。 （在小提琴中，徽標寬度為20％，並且仍然有效；上下縮放“運行”窗口以進行檢查）。

（讓我知道這是否不能解決您的問題，我很樂意再次訪問）。