Diese Frage hat hier bereits eine Antwort:

Ich könnte etwas Hilfe gebrauchen, damit meine Bootstrap 3-Navigationsleiste beim Zusammenklappen richtig aussieht.

Entschuldigung, wenn dies eine doppelte Frage ist, aber eine gute lange Suche nicht die Antworten ergab, die ich brauche.

Ich habe eine ansprechende Navigationsleiste basierend auf dem Bootstrap-Demo-Code erstellt. Darin befinden sich ein 40x40-Bild und eine Globus-Glyphe, die mit Dropdown-Menüs verknüpft sind, die ich rechtsbündig ausgerichtet und im Navigations-Collapse weggelassen habe.

eider erscheinen die Zeichen 40x40 und Globus in einer neuen Zeile, wenn das Navi zusammenbricht, was ich nicht wil

Mein perfektes Layout, wenn das Navi zusammenbricht, ist, dass das 40x40 und der Globus in der gleichen Zeile erscheinen wie mein Markenbild, der Reduzierungsknopf usw .; rechtsbündig und nicht im Einklappfenster enthalten.

Vielen Dank für jeden Rat, den Sie geben können!

Code ist wie folgt:

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-hd-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="index.php"><img class="navbar-brand img-responsive" src="http://placehold.it/138x38" alt="Logo"></a>
    </div>
     <div class="navbar-right">
        <ul class="nav"  style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Hello</li>
                    <li class="divider"></li>
                    <li><a href="">Thing 1</a></li>
                    <li class="divider"></li>
                    <li><a href="">Thing 2</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav"   style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe grey"></span><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li style="padding: 10px"><p>News</p></li>
                </ul>
            </li>
        </ul>

         <div class="collapse navbar-collapse navbar-hd-collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="">Product</a></li>
                 <li><a href="">Other Product</a></li>
                 <li><a href="">Third Product</a></li>
             </ul>
         </div>
    </nav>

JS Fiddle ist da:http: //jsfiddle.net/CaraGee/q8br8