2017-05-23 1 views
0

Sur ma page navbar apparaît verticalement au lieu d'horizontalement.bootstrap navbar affiche verticalement au lieu d'horizontalement

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title> 
      Home | Bootstrap 
     </title> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
    </head> 
    <body> 
     <nav class="navbar navbar-light bg-faded"> 
      <a class="navbar-brand" href="#">My bootstrap application</a> 
      <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="index.html">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="about.html">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="contact.html">Contact</a> 
       </li> 
      </ul> 
      <form class="form-inline pull-xs-right"> 
       <input class="form-control" type="text" placeholder="Search" /> 
       <button class="btn btn-primary" type="submit">Search</button> 
      </form> 
     </nav> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>hello world!</h1> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        Bootstrap 4 
       </div> 
      </div> 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

Sample

Pourquoi? Selon les docs, il devrait être horizontal par défaut.

Répondre

2

Ajouter navbar-toggleable-md classe dans nav élément pour le rendre regarde horizontalement md vue:

See this fiddle

Docs: