En-tête Bootstrap4 coincé dans l'affichage mobile

Je suis en train de créer l'en-tête dans le composant bootstrap 4 (beta) navbar. la barre de navigation est coincé dans le mobile avec les hamburgers pour afficher le menu sous un dropdowns ... mais je suis sur un bureau, donc je le veux montrer comme une barre de navigation normale au haut de la pageEn-tête Bootstrap4 coincé dans l'affichage mobile

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

Voici un projet simple avec le code de l'en-tête seulement et avec le même Probleme

<!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>

Navigateur avec le index.html qui montrent ma barre de navigation

Quelqu'un sait quel est le problème?

je l'ai testé sur une machine virtuelle et sur un bureau et les deux ont le même problème ... Mon Résolution d'écran est 1920x1080 La largeur de NavBar est 1920

je suis un peu perdu ...

Source

2017-09-21 Vince

Je crois que j'ai résolu votre problème, dans la console la barre de navigation est rendue dans "flexbox-direction: colonne" J'ai déplacé le code ajouté un style en ligne qui devrait être assez facile de passer à un CSS si vous souhait. Plus de travail CSS est nécessaire après si vous voulez l'exemple exact.

Ajouté le style style="flex-direction: row"

Hope this helps.

   <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>

Source

2017-11-21 10:53:14

le problème étaient du site d'amorçage ... leur nouvelle forme ne marche pas de style avec l'ancien ... alors quand je suis passé à leur nouveau site et en utilisant leur nouvelle étiquette et la classe qu'il travaillait comme prévu – Vince

En-tête Bootstrap4 coincé dans l'affichage mobile

Répondre

Questions connexes