Bootstrap 4 Navbar kollabierendes Menü mit Elementen auf den rechten Spalten

Ich versuche seit langem ein mobiles Menü mit Bootstrap 4 zu erreichen. Mein Hauptziel ist es, die 3 Markentexte und die Umschaltfläche in der gleichen Zeile für das Handy anzuzeigen Speisekarte. Aber wenn ich auf den Schalter klicke, gehen die 3 Marken unter das ausgeblendete Menü. Ich möchte, dass 3 Marken in der obersten Zeile in einer Zeile bleiben, zusammen mit der Umschalttaste, auch wenn das Menü nicht mehr angezeigt wird. Mein Problem ist, dass das kollabierende Menü eine Spaltenbreite von 100% verwendet, was schließlich die 3 Marken unter das Menü drückt. Jede Hilfe würde wertschätzen.Bootstrap 4 Navbar kollabierendes Menü mit Elementen auf den rechten Spalten

Ziellösung

HTML

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 

    <button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
    <div class="row"> 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div> 
    </div> 
</nav> 
</body>

CODEPEN

Quelle

2017-04-06 Saif Md Towfiq Islam

Es wäre besser, die neueste Alpha 6 anstelle von Alpha 3 zu verwenden. Ist dies für Sie möglich? – ZimSystem

Ja, natürlich kann ich Alpha 6 verwenden, aber wie kann es helfen, die von mir gesuchte Lösung zu erreichen? Irgendeine Idee @ZimSystem? –

Erklären Sie auch, was Sie erwarten, für die nicht mobile horizontale Version des Menüs zu sehen, bevor es in die mobile Version kollabiert. – ZimSystem

Probieren Sie die neue Bootstrap 4 Alpha 6 Flexbox Dienstprogramme für die Ausrichtung und halten das Markup einfacher:

http://www.codeply.com/go/OFXaPnKx2P

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top"> 
    <div class="container"> 
     <div class="d-flex w-100 justify-content-between flex-last"> 
      <button class="navbar-toggler align-self-end mb-1" data-target="#collapsenav" data-toggle="collapse" type="button"> 
       ☰ 
      </button> 
      <div class="d-flex w-100 flex-first justify-content-between"> 
       <a class="navbar-brand" href="#home">Brand-1</a> 
       <a class="navbar-brand" href="#home">Brand-2</a> 
       <a class="navbar-brand" href="#home">Brand-3</a> 
      </div> 
     </div> 
     <div class="navbar-collapse collapse w-100" id="collapsenav"> 
      <ul class="nav navbar-nav align-items-center"> 
       <li class="nav-item active"><a class="nav-link" href="#">About</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
       <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

Demo

Aktuell in Alpha 6 there is a bug, die eine container innerhalb der macht Schrumpfbreite der navbar auf kleinem Bildschirm. Dies wird in der Beta behoben, aber bis dahin brauchst du nur ein wenig CSS, um den inneren Container auf dem Handy in voller Breite zu halten.

@media (max-width:767px) { 
    .container { 
     width: 100%; 
     margin-left: 0; 
     margin-right: 0; 
    } 
}

Quelle

2017-04-07 11:31:35 ZimSystem

Perfekt, ich betrachte Ihre Antwort als die endgültige Antwort, da es sehr sauber und ohne Wiederholung von HTML-Code ist. Es löst das Problem, das ich schön habe. Vielen Dank und Prost! @ ZimSystem –

Haben die drei Marken haben auf der rechten Seite sein?

Mit Bootstrap können Sie die Marken auf der linken Seite einfach durch Bewegen der Navigationsmarkenknöpfe zwischen der Schaltfläche und den divs für den Inhalt der Navigationsliste haben. Dadurch werden Ihre 3 Marken an Ort und Stelle bleiben und nicht nach unten gedrückt werden.

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
    //move brand items here 
    <a class="navbar-brand" href="#home">Brand-1</a> 
    <a class="navbar-brand" href="#home">Brand-2</a> 
    <a class="navbar-brand" href="#home">Brand-3</a> 
    <div class="row"> 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
    //delete these out 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div> 
    </div> 
</nav> 
</body>

Wenn Ihre drei Marken auf der rechten Seite sein haben, dann denke ich, Sie werden einige Bootstrap CSS Arbeit zu tun haben, die Marken auf großen Bildschirmen zeigen zu haben, wie Sie es ursprünglich in Ihrem Code haben und dann auf verbergen kleinere Bildschirme und zeigen den Code, wie ich oben hinzugefügt. Zum Beispiel:

<body id="page-top"> 
<nav class="navbar navbar-dark bg-primary navbar-fixed-top"> 
    <div class="container"> 
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button"> 
      ☰ 
     </button> 
     //show these here on small screens 
     <a class="navbar-brand" href="#home">Brand-1</a> 
     <a class="navbar-brand" href="#home">Brand-2</a> 
     <a class="navbar-brand" href="#home">Brand-3</a> 
     <div class="row"> 
      <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav"> 
       <ul class="nav navbar-nav"> 
        <li class="nav-item"><a class="nav-link" href="#">About</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> 
        <li class="nav-item"><a class="nav-link" href="#">Resume</a></li> 
       </ul> 
      </div> 
     </div> 
    //show these below on large screens 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-1</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-2</a> 
     </div> 
     <div class="col-md-2 col-sm-4 col-xs-4"> 
      <a class="navbar-brand" href="#home">Brand-3</a> 
     </div> 
    </div>

Ich bin noch relativ neu in der Codierung, also hoffe ich, dass dies hilft!

Quelle

2017-04-06 20:24:24 Meg

Dank drückt Ihre Tipps können aber nicht als vollwertige Lösung betrachtet werden. Aber der Tweak/Workaround von Ihnen schätzt auch. Danke Mann, Prost! –

Bootstrap 4 Navbar kollabierendes Menü mit Elementen auf den rechten Spalten

Antwort

Verwandte Themen