Bootstrap v4-Alpha 6 | .float-lg-right funktioniert nicht

Ich versuche, eine Bootstrap-Website zu erstellen, wobei die Menü-Navigationsinhalte nach rechts ausgerichtet sind. Dabei wird .float-lg-right (formal .pull-lg-right) verwendet. Das Problem ist, dass die ul bleibt nach links ausgerichtet. Das Interessante daran ist, dass mit .float-md-right der Inhalt im ausgeblendeten Menü rechts ausgerichtet ist.Bootstrap v4-Alpha 6 | .float-lg-right funktioniert nicht

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <!-- META DATA --> 
 
      <meta charset="utf-8"> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
      <meta name="description" content=""> 
 
      <meta name="author" content=""> 
 
      <title>TEXT</title> 
 
      <!-- CSS & ASSETS--> 
 
      <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
     </head> 
 
     <body> 
 
      <nav class="navbar navbar-toggleable-md mb-4"> 
 
       <div class="container"> 
 
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
 
         data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" 
 
         aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="#">TEST</a> 
 
        <div class="collapse navbar-collapse" id="navbarCollapse"> 
 
         <ul class="navbar-nav mr-auto float-lg-right"> 
 
          <li class="nav-item"> 
 
           <a class="navlink" href="#">TEXT</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </nav> 
 
      <!-- SCRIPTS --> 
 
      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
 
       integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" 
 
       crossorigin="anonymous"></script> 
 
      <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
 
       integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 
 
       crossorigin="anonymous"></script> 
 
      <script src="js/bootstrap.min.js"></script> 
 
     </body> 
 
    </html>

Quelle

2017-01-14 nick123

hatte ich das gleiche Problem und die Leute, die v4 alpha 6 haben vor allem in dieser Situation stecken. Also habe ich mir die Bootstrap-Dokumentation seit Tagen angeschaut und endlich die Lösung gefunden.

Für auf der linken Seite floating:

<div class="d-flex justify-content-end"> 
    <div class="mr-auto">Flex item</div> 
    <div>Flex item</div> 
    <div>Flex item</div> 
</div>

Für auf der rechten Seite floating:

<div class="d-flex justify-content-start"> 
    <div>Flex item</div> 
    <div>Flex item</div> 
    <div class="mr-auto p-2">Flex item</div> 
</div>

Weitere Informationen unter: https://v4-alpha.getbootstrap.com/utilities/flexbox/#with-justify-content

empfehle ich, dass v4 Alpha 6 Benutzer sollten Werfen Sie einen Blick auf diese Antwort

Quelle

2017-01-16 21:19:28

Für float - * - rechts Verwendung ml-Auto

Für float - * - mr-auto

Quelle

2017-01-31 12:49:56

Ich habe gerade Gebrauch gelassen, wenn ich Klasse ausschließen = "Reihe" auf dem Patentelement erlaubte es float-md-Recht auf meiner Scheidung mit class = "col-12 col-md-5".

<div> 
<div class="col-12 col-md-5 float-md-right"> 
This floats right 
</div> 
<div class="col-12 col-md-6 offset-md-6"> 
Thus is on left 
</div> 
</div>

Quelle

2017-03-12 07:06:00 Chase

Bootstrap v4-Alpha 6 | .float-lg-right funktioniert nicht

Antwort

Verwandte Themen