Link mit Rechts auf Navbar mit Bootstrap 4 ausrichten

-1

Wie kann ich Link in Bootstrap-4 auf die rechte Seite der Navbar ausrichten. Unten ist mein Code:Link mit Rechts auf Navbar mit Bootstrap 4 ausrichten

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <div class="mr-auto"> 
 
    <div class="float-right"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item mr-3"> 
 
      <a href="#"><i class="fa fa-commenting-o text-light fa-lg"></i></a> 
 
     </li> 
 
     <li class="nav-item mr-3"> 
 
      <div class="dropdown"> 
 
      <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       <i class="fa fa-ellipsis-v text-light fa-lg"></i> 
 
      </a> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

I Kommentarsymbol wollen und vertikale Auslassungssymbol rechts navbar

Quelle

2017-08-25 Jane Doe

Vielleicht erklären, was Sie versucht haben? – wwkudu

LOL! Versuchst du, SARCASTIC zu sein? Was ich ausprobiert habe, steht direkt oben in Frage und wird mit dem blauen Button "Code-Snippet" deutlich besser erklärt. –

Lol, nicht sarkastisch. Ich möchte Ihnen nur helfen, schneller eine Antwort zu erhalten. Es ist nur so, dass es viel länger dauert, Menschen zu helfen, wenn sie ihren Code von Grund auf neu debuggen müssen. Sie haben den gesamten Code zur Verfügung gestellt, aber nicht wirklich die Geschichte/Ihr Denken bis zu diesem Punkt gegeben. – wwkudu

Does this answer your question?

hinzufügen Sie möchten mr-auto der Klasse verschieben rechts ausrichten und navbar-expand-lg aus Ihrer Nav-Klasse entfernen.
Codepen Example

Quelle

2017-08-25 06:36:13

Wenn Sie sehen, habe ich das bereits angewendet, aber es ist nicht nach rechts ausgerichtet. –

'navbar-expand-lg' verhindert, dass Ihre Artikel nach rechts verschoben werden Siehe Beispiel: [codepen] (https://codepen.io/floresfxf/pen/qXyQjX) –

Link mit Rechts auf Navbar mit Bootstrap 4 ausrichten

Antwort

Verwandte Themen