Bootstrap-4 navbar Rechtsbündig mit Knopf, der nicht einstürzt, die auf mobilen

Ich versuche, die 3 Elemente auf einer Navigationsleiste. Eine Links ausgerichtete Marke, einer rechts ausgerichteten Gruppe von verbindungen, die zusammenbrechen auf mobile Endgeräte und eine zusätzliche Taste, die ist auch richtig ausgerichtet, wie die links, sollte aber nicht klappern mit Ihnen.

Nach rechts ausrichten Taste und links ich wickelte Sie in ml-auto-div. Dies funktioniert gut auf mobile (1. Bild), aber auf dem PC erscheint die Schaltfläche oben links (2. Bild). Ich habe versucht, hinzufügen btn-group auf das div, das sozusagen funktioniert, aber die Taste geht, mit links und es sieht seltsam aus (3. Bild).

Bootstrap-4 navbar Rechtsbündig mit Knopf, der nicht einstürzt, die auf mobilen

Wie kann ich richtig auszurichten, diese Komponenten horizontal?

Bitte beachten Sie, dass ich nicht wollen, dass die Schaltfläche in der gleichen Gruppe mit den anderen links. Ich will, dass die Schaltfläche immer sichtbar, auch auf einem kleinen Bildschirm. Ich habe gesehen, ein paar ähnliche Fragen, aber Sie alle haben das Recht ausgerichtet Elemente in der gleichen, Reduzierbare Gruppe ist das nicht gut für mich.

Können Sie fügen Sie den code unten, um w3school TryIt editor

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto">
            <button class="btn btn-success">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto"/>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

                </ul>
        </div>
</nav>
InformationsquelleAutor under | 2018-08-15

 

4 Replies
  1. 2

    Keine der bestehenden Antworten Arbeit und erfordern komplizierte hacks, die nicht korrekte Verwendung der Bootstrap-4 Navbar. Die Navbar in diesen Antworten nicht richtig angezeigt auf dem Handy. Die .row ist nur gedacht, um enthalten grid-Spalten, und die grid nicht unterstützt Navbar-Inhalt

    Die Antwort ist einfach. Die nur Anpassung, die Sie benötigen, ist das deaktivieren der flex-grow (mit flex-grow-0), die verwendet wird auf die navbar-collapse. Dies ermöglicht es der ml-auto auf den Knopf drücken, auf der rechten Seite.

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
        <a class="navbar-brand" href="#">Home</a>
        <button class="btn btn-success ml-auto">My Button</button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
            <ul class="navbar-nav text-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Right Link 1</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Right Link 2</a>
                </li>
            </ul>
        </div>
    </nav>

    Zusätzlich text hinzufügen-Recht auf die navbar-nav wenn Sie möchten, dass die links direkt auf dem Handy.

    Demo: https://www.codeply.com/go/ljI9F6aRLk

    Bootstrap-4 navbar Rechtsbündig mit Knopf, der nicht einstürzt, die auf mobilen

    Bootstrap-4 navbar Rechtsbündig mit Knopf, der nicht einstürzt, die auf mobilen



    Siehe auch: Bootstrap-4 – Navbar Elementen außerhalb der Zusammenbruch

    • perfekt! Dank
  2. 2

    Habe ich die Lösung gefunden endlich. Der trick ist die Verwendung des grid-Systems richtig. Ändern Sie die col-Klassen wie pro Ihre Anforderung für die Reaktionsfähigkeit (in der navbar collapse Teil) Auch auf die Taste und Zusammenbruch sind nicht Teil der gleichen Gruppe gerade, wie man wollte, da wickelte Sie in das gleiche div verursachen den Zusammenbruch nicht korrekt auf mobilen Bildschirmen. Hoffe es hilft dir..

    CSS:

    body { 
        padding-top: 105px; 
    }
    
    .collapse{
      justify-content:flex-end;
    }
    .text-nowrap {
        white-space: nowrap;
    }

    HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
            <div class="container">
                <a href="index.html" class="navbar-brand">
                    <h3 class="d-inline align-middle text-white">
                        Brand
                    </h3>
                </a>
               
                
                <button id="myButton" class="btn btn-success ml-auto mr-2">
                My button
                </button>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                 <div id="navbarNav" class="col-md-3 col-lg-2 collapse navbar-collapse ml-5">
                    <ul class="navbar-nav ">
                        <li class="nav-item">
                            <a href="#home" class="nav-link"><span class="text-nowrap">Right Link 1 </span></a>
                        </li>
                        <li class="nav-item">
                            <a href="#about" class="nav-link"><span class="text-nowrap">Right Link 2 </span></a>
                        </li>
                    </ul>
                </div>
            </div>
           
            
        </nav>
    <section>
    <div class="text-center">
      <p>hello this is teadsfadsf  adsfadfs adfsasdfadf adsf adsf asdf adsf asdf adsf a
      adfs ads
      f 
      
      asd fadfs adfs 
      
      ads fds fdfs asdfadsxt</p>
    </div>
    </section>
    
      
    </body>
    </html>

  3. 1

    Ich den code so ändern. Versuchen um dieses auf eine fullpage und entsprechend verkleinern:

    Füge ich d-sm-noneKlasse auf den 1. button, füge ich justify-content-end Klasse auf Ihre nav-collapse erstellen Sie dann eine andere Taste <button class="btn btn-success d-none d-sm-block">My Button</button>Teil Ihrer nav-collapse und keine anzeigen, sobald es geht auf andere Größen außer sm.

    HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
       <a class="navbar-brand" href="#">Home</a>
    
    
    <div class="ml-auto">
                <button class="btn btn-success d-sm-none">My Button</button>
                 
    
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                  <span class="navbar-toggler-icon"></span>
                </button>
    
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <button class="btn btn-success  d-none d-sm-block">My Button</button>
                    <ul class="navbar-nav ml-auto ">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Right Link 1</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Right Link 2</a>
                        </li>
    
                    </ul>
            </div>
    </nav>
    <br>
    
    <div class="container">
      <h3>Navbar Forms</h3>
      <p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
    </div>
    
    </body>
    </html>

    • Hi, nicht ganz, wenn die Seite, die Breite ist um etwa 700, die Tasten sind noch gestapelt. Sie gehen horizontal bei rund 770…
    • Hi @unter ich bearbeitete meinen code. ich änderte md in sm. Hoffe, das hilft.
    • die hamburger Menü sollte vorhanden sein, auf kleinen Bildschirmen ist nicht passiert in deinem code..
  4. 0

    Herausgefunden. Hinzufügen von „Zeile“ auf div macht Sie horizontal gestapelt werden. Obwohl, das verursacht einige komische Verhalten, wenn Sie zusammengebrochen-Taste gedrückt wird. Es würde die Verschiebung hin zur Mitte. Hinzufügen von mehr linken Rand automatisch behoben.

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
       <a class="navbar-brand" href="#">Home</a>
    
    
        <div class="row ml-auto">
                <button class="btn btn-success ml-auto">My Button</button>
    
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                  <span class="navbar-toggler-icon"></span>
                </button>
    
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto" />
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Right Link 1</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Right Link 2</a>
                        </li>
    
                    </ul>
            </div>
        </div>        
    </nav>
    • Überprüfen Sie heraus meine Lösung.
    • Die .row sollte nicht verwendet werden, für die Navbar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.