So platzieren Sie Links in einer Navigationsleiste

Question

Ich habe momentan Probleme mit CSS. Ich arbeite an einer Navbar mit einigen horizontalen Links und einem Dropdown-Menü am Ende.

Die Links kollabieren auf einem kleinen Bildschirm zu einem Hamburgermenü. Was ich versuche zu tun ist, wenn die Links zusammenbrechen, ich möchte den letzten Link, der neben dem Dropdown-Button ist, nach dem Dropdown-Button platziert werden.

Hier ist, wie es aussieht, wenn nicht kollabierten und mit dem Drop-Down-offen:

Dies ist, wie es im Moment kollabiert aussieht:

Und das ist wie ich möchte, dass es aussieht:

Ich bin nicht sicher, wie dies zu erreichen ist. Ich habe versucht, den "Profilnamen" auf der rechten Seite zu schweben und es funktioniert so, wie es sich rechts vom "IMG" platziert, aber dann ganz nach rechts. Ich möchte es gerne in den "IMG" legen. Wenn Sie es an die richtige Stelle packen, wird die Reaktionsfähigkeit beeinträchtigt.

Ich verwende Bootstrap für das Reaktionsverhalten und Dropdown-Menü. Ich gehe davon aus, dass ich dafür Medienabfragen verwenden muss.

Wenn jemand eine Idee davon hat, wie dies zu tun ist, bin ich mehr als dankbar für jeden Tipp!

hier ist ein Code

<ul> 
 
    <li class="horizontal-align">Link 1</li> 
 
    <li class="horizontal-align">Link 2</li> 
 
    <li class="horizontal-align">Profile name</li> 
 
    <li class="horizontal-align"> <img class="Profile-img" /> 
 
    <ul> 
 
     <li class="dropdown-li">Link 3</li> 
 
     <li class="dropdown-li">Link 4</li> 
 
     <li class="dropdown-li">Link 5</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Halten Sie die Dropdown-Liste geöffnet, während in Hamburger-Modus ein Problem für einen anderen Tag.

Answer 1

so einfach diese Weise

<li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg"/>Profile name

.Profile-img { 
 
    width: 20px; 
 
    height: 10px; 
 
}

<ul> 
 
    <li class="horizontal-align">LinkLink 1</li> 
 
    <li class="horizontal-align">Link 2</li> 
 
    <li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg" />Profile name 
 
    <ul> 
 
     <li class="dropdown-li">Link 3</li> 
 
     <li class="dropdown-li">Link 4</li> 
 
     <li class="dropdown-li">Link 5</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Überprüfung des Bootstrap 4 offizielle Dokumentation schreiben. Ich benutze es gestern für eine Navbar und es funktioniert gut mit dem Responsive.
https://v4-alpha.getbootstrap.com/components/navbar/
wenn Sie Bootstrap-4 in Ihrem Code aufnehmen möchten, fügen Sie diese auf den Kopf Tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

Answer 3

Dies ist gelöst. Lösung war peinlich einfach. Ich habe Profilname und Img in ein Div eingepackt und auf Breite gesetzt: fit-content. Wenn sich dann der Float des Profilnamens bei Medienabfragen nach rechts änderte, positionierte er sich direkt neben dem img.

Danke für die Antworten obwohl!