부트 스트랩 탐색 모음에 CSS가 표시되지 않습니다.

navbar가 작동하지 않습니다. w3schools에서 nav 바코드를 받았습니다. 그러나 일어나는 모든 것은 그것이 navbar를 보여줄 것이지만, 어떤 CSS도 적용되지 않고, 그것은 매우 잘못 보인다. 여기 여기 내 코드부트 스트랩 탐색 모음에 CSS가 표시되지 않습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Html Editor 0.1</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
     <link rel="stylesheet" href="meineStyles.css"/> 
    </head> 
    <body> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 
     <br> 
     <div class="container jumbotron shadowdiv"> 
     <form id ="kekform" > 
      <div class="row"> 
       <div class="col-md-6"> 
        <textarea rows="4" cols="50" class="form-control" name="comment" form="kekform" id="textarea1" 
       onkeyup="showUserJquery(this.value)"></textarea> 
       </div> 
       <div class="col-md-6" id="divfortext"> 
        <div id="eindiv" style="vertical-align:top"><b id="test"></b></div> 
       </div> 
      </div> 
      <table> 
       <tr> 
        <td> 
        </td> 
        <td > 
        </td> 
       </tr> 
       <tr> 
        <td> 
        <button onclick="changeColor()" type="button" style="color: red" >Farbe ändern</button> 
        </td> 
        <td> 
        <input type="radio" form="kekform" value="htmlno" name="htmlenable" checked="checked" id="htmlno"> 
        <label for="htmlno">No HTML</label> 
        </td> 
       </tr> 
       <tr> 
        <td> 
        </td> 
        <td> 
        <input type="radio" form="kekform" value="htmlyes" name="htmlenable" id="htmlyes"> 
        <label for="htmlyes">Yes HTML</label> 
        </td> 
       </tr> 
      </table> 
     </form> 
     <br> <br> 
     <br> 
     <br> 
     </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="meineScripte.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 

    </body> 
</html>

당신이, meineScripte.js 및 meineStyles.css은 해당 부분에 대한 jsfiddle이다. https://jsfiddle.net/m7kq6p9q/ 예, 이미 내 자신의 .js 및 CSS없이 시도했지만 여전히 작동하지 않습니다. 또한 부트 스트랩 파일이 올바르게로드 된 경우 Chrome의 개발자 도구를 확인했습니다.

네비게이션이 예상 한 것처럼 보이지 않는 것을 분명히 볼 수 있습니다. 이것은 내가 어디에서 왔는지입니다. https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

출처

2017-09-08 SuperUSer

라이브? – SuperUSer

제공된 설명서를 사용하여 here을 제공 했으므로 작업 더미를 만들 수있었습니다.

참고 : W3 스쿨 '부트 스트랩 튜토리얼은 버전 3.XX을 기반으로 당신은 당신이 아니라 W3 스쿨 대신 부트 스트랩의 문서의 사용을 만들어 주겠다고 결과로, 따라서 아마도 일부 호환성 문제가 부트 스트랩 4.0.0 사용 .

HTML

<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"> 
     <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" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

Script47 당신이 그것을 해결 되었습니까 @ 예

JSFiddle

출처

2017-09-08 08:05:06 Script47

고마워 이제 호환성 문제로 인해 문제가 해결되었다고 생각합니다. – SuperUSer

부트 스트랩 탐색 모음에 CSS가 표시되지 않습니다.

답변

관련 문제