CSS float-right funktioniert nicht in Bootstrap 4

Ich versuche, meine Nav-Links auf der rechten Seite meiner Navbar zu schweben, aber ich kann es nicht zum Laufen bringen. Ich habe versucht, die Klasse ".float-right", "float-xs-right" und "justify-content-end" bootstrap 4 zu verwenden, zusammen mit "float: right! Wichtig;" in meiner CSS-Datei, und es wird immer noch nicht funktionieren. HierCSS float-right funktioniert nicht in Bootstrap 4

ist der HTML-Code für die navbar meiner Website:

<div id="navbar" class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="navbar-brand"> 
       <img src="images/logo.png" width="88px"> 
       Scervino Lawn Service 
      </div> 
      <ul class="nav justify-content-end"> 
       <li class="nav-item"> 
        <a class="nav-link" href="home">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="services">Services</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="about">About Us</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

Und hier ist die CSS:

#navbar { 
    box-shadow: 0px 0px 11px #000; 
    padding: 0; 
} 

#navbar .navbar-brand { 
    font-size: 1.6em; 
    font-weight: bold; 
    color: #9CCC58; 
}

ich relativ neu bin auf die Bootstrap 4 Rahmen, so dass es möglich ist, dass Ich könnte nur einen dummen Fehler machen, aber hoffentlich kann mir jemand helfen. :(

Quelle

2017-08-03 Jake Scervino

Sie können .justify-content-between auf dem übergeordneten verwenden .row die flex Kinder zu der weit Kante der Reihe zu bewegen.

#navbar { 
 
    box-shadow: 0px 0px 11px #000; 
 
    padding: 0; 
 
} 
 

 
#navbar .navbar-brand { 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    color: #9CCC58; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="navbar" class="navbar navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="row justify-content-between"> 
 
      <div class="navbar-brand"> 
 
       <img src="images/logo.png" width="88px"> 
 
       Scervino Lawn Service 
 
      </div> 
 
      <ul class="nav justify-content-end"> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="home">Home</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="services">Services</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="about">About Us</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="contact">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div>

Quelle

2017-08-03 21:39:22

Das hat funktioniert, vielen Dank! –

Ich habe versucht, mit Bootstrap 4.0.0 Alpha 6 und es funktioniert, ist hier das Beispiel: https://repl.it/JwMq/0

ich das gerade hinzugefügt:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>

Und ein Extra </div>

Quelle

2017-08-03 21:43:55 DarkCeptor44

Ich habe diesen Code und es funktioniert immer noch nicht. Und oops tut mir leid, ich habe vergessen, das div hinzuzufügen, wenn ich meinen Code in meine Frage eingefügt habe, aber das extra div gibt es in meinem ursprünglichen Code –

Dann sollte die @ Michael-Coker Antwort funktionieren. – DarkCeptor44

-Update 2018 - Bootstrap 4.0.0

Die ursprüngliche Antwort funktioniert nicht mehr in Bootstrap 4.0.0, und es ist keine gute Praxis Bootstrap zu gebrauchen .row in der navbar Komponente . Die .row sollte nur für Rasterspalten verwendet werden.

Nun, da Bootstrap 4 Flexbox ist, ist eine Möglichkeit zum Ausrichten von Navbar-Komponenten die auto-margin utility classes, wie ml-auto, die eine Verknüpfung für CSS margin-left:auto ist. Dies kann dazu verwendet werden, um die nav nach rechts zu schieben ...

https://www.codeply.com/go/ZAGhCX5lpq

<div id="navbar" class="navbar navbar-expand navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-brand"> 
      <img src=".." width="88px"> 
      Scervino Lawn Service 
     </div> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="services">Services</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="about">About Us</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div>

Oder die flexbox utils wie justify-content-between auf der container innerhalb der Navigationsleiste verwendet werden ...

<div id="navbar" class="navbar navbar-expand navbar-fixed-top"> 
    <div class="container justify-content-between"> 
     <div class="navbar-brand"> 
      <img src=".." width="88px"> 
      Scervino Lawn Service 
     </div> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="services">Services</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="about">About Us</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div>

Beachten Sie, dass in diesem Fall justify-content-between funktioniert, weil es nur 2 Navbar-Komponenten (Navbar-Marke und Nav) gibt.

Quelle

2018-02-19 13:17:46 ZimSystem

CSS float-right funktioniert nicht in Bootstrap 4

Antwort

Verwandte Themen