Bootstrap4 Header im mobilen Display stecken

Ich versuche, den Header in der Bootstrap 4 (Beta) Navbar-Komponente zu erstellen. die navbar ist in Mobil mit den Hamburgern stecken Sie das Menü unter einem Dropdown-Listen zu zeigen ... aber ich bin auf einem Desktop, so möchte ich es am oberen Rand der SeiteBootstrap4 Header im mobilen Display stecken

als normale Navigationsleiste zeigen

https://v4-alpha.getbootstrap.com/components/navbar/

Hier ist ein einfaches Projekt mit dem Code für den Header nur und mit dem gleichen problem

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <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.js" 
     integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
     crossorigin="anonymous"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
     </ul> 
     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
</nav>

Browser mit der index.html, die meine navbar zeigen

jemand weiß, was ist das Problem?

i auf einer VM und auf einem Desktop-getestet haben und beide tun das gleiche Problem ... My Screen Auflösung ist 1920x1080 Die NavBar Breite 1920

ich bin ein wenig verloren ...

Quelle

2017-09-21 Vince

Ich glaube, ich habe dein Problem gelöst, in der Konsole wird die Navbar in "flexbox-Richtung: Spalte" gerendert. Ich habe den Code um einen Inline-Stil verschoben, der ziemlich einfach zu einem CSS verschoben werden sollte Wunsch. Mehr CSS-Arbeit ist erforderlich, wenn Sie das genaue Beispiel möchten.

Hinzugefügt den Stil style="flex-direction: row"

Hoffnung, das hilft.

   <ul class="navbar-nav mr-auto list-inline" style="flex-direction: row"> 
        <li class="nav-item active"> 
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Link</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link disabled" href="#">Disabled</a> 
        </li> 
        <form class="form-inline my-2 my-lg-0"> 
         <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
        </form> 
       </ul> 
       <a class="navbar-brand" href="#">Navbar</a> 

       <div class="collapse navbar-collapse" id="navbarSupportedContent"> 


       </div> 
      </nav>

Quelle

2017-11-21 10:53:14

das Problem waren von der Bootstrap-Website ... ihre neuer Stil doesnt fit mit dem alten ... so, wenn ich auf ihre neue Website geschaltet und mit ihrem neuen Tag-und-Klasse war es funktioniert wie erwartet – Vince

Bootstrap4 Header im mobilen Display stecken

Antwort

Verwandte Themen