2017-05-23 4 views
0

내 페이지에서 navbar이 가로로 표시되지 않고 세로로 표시됩니다.부트 스트랩 navbar가 가로 대신 세로로 표시됩니다.

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

이유는 무엇입니까? 문서에 따르면 기본적으로 가로로 표시되어야합니다.

답변

2

md보기에 수평으로 보이는 만들기 위해 navbar-toggleable-md 클래스 요소 nav에 추가 :

See this fiddle

Docs :