부트 스트랩 Navbar가 세로 목록으로 나타납니다 ...?

그래서 튜토리얼 온라인 (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/)을 따르고 코드를 정확히 따르고 있지만 어떤 이유로 내 탐색 표시 줄이 나타나지 않아야합니다. 내 친구 (웹 개발자와 더 많은 경험을 가진 사람)는 코드를 빠르게 살펴본 후 잘못 된 것이 무엇인지 파악할 수 없었습니다. 그래서 나는 내 문제를 여기에 게시 할 것이라고 생각했다.부트 스트랩 Navbar가 세로 목록으로 나타납니다 ...?

여기 enter image description here

가의 코드입니다 :

html code (left), actual page (right)

나는 또한 당신에게 내 작업 디렉토리를 보여주지 (파일이 모두 동일한 디렉토리에있는 경우 단지 경우에 당신이 궁금해하는) 당신이 그것을 자신을 시도 할 경우에 대비

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My bootstrap</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
</head> 
<body> 

    <div class="container"> 
     <h1><a href="#">Bootstrap Site</a></h1> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">Projects</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">Downloads</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </div> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
</body>

출처

2014-02-22 FateNuller

어떤 부트 스트랩 버전을 사용하고 있습니까? – Sebsemillia

최신 부트 스트랩을 사용 중입니다.

<div class="navbar"> 및 navbar-nav에 <ul class="nav">에 navbar-default을 추가해야합니다.

다음 마크 업을 제공합니다.

Working Example

<div class="container"> 
    <h1><a href="#">Bootstrap Site</a></h1> 
    <div class="navbar navbar-default"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Downloads</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</div>

미래의 문제를 들어, 여기에 요청하기 전에 공식 부트 스트랩 문서를 읽어보세요. 그들은 모든 것을 자세하게 설명했다.

BT Navbar

나는 당신의 문제가 sitepoint 튜토리얼은 당신이 다운로드 한 사용보다는 이전 부트 스트랩 버전을 사용하는, 추측. 내 경우

출처

2014-02-22 19:03:01 Sebsemillia

부팅 스트랩에 cdn을 사용하여 여전히 수직적으로 표시됩니다. – Snickers3192

@ Snickers3192이 문제를 어떻게 해결 했습니까? 지금이 현재를 직면하고있는 메신저. –

남자 나는 내가 그것을 모두 쓸어 버리고 다른 것을 한 것 같은데 기억이 안 난다. – Snickers3192

나는 부트 스트랩 버전 3에 따라 인터넷에서 내가 찾은 몇 가지 코드를 시도했지만 내 응용 프로그램은 부트 스트랩 버전 4 기반으로했다. 두 버전 간에는 중요한 차이점이 있습니다 (here 참조).

V4에 따라 다음 코드는 나를 위해 작동 :

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" 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> 

    <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 dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <div class="dropdown-divider"></div> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </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="search" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

공식 문서

가 here를 찾을 수 있습니다.

출처

2018-02-07 02:51:08 Malick

부트 스트랩 v4를 사용하여 비슷한 문제가 발생했습니다. 이전 답변 코드는 잘 작동했지만 수직 navbar를 수평으로 만든 부분이 main div 태그에서 navbar-expand-lg를 사용하는 것이 었음을 명확히 밝히고 싶었습니다. 다른 크기 (MD, SM 또는 XS)에 LG 전자를 변경

는

<nav class="navbar navbar-expand-lg">

화면 크기 환경 설정에 따라도 도움이된다.

희망 하시겠습니까?

출처

2018-02-26 08:09:20

부트 스트랩 Navbar가 세로 목록으로 나타납니다 ...?

답변

관련 문제