Twitter 부트 스트랩 Navbar가 잘못 그립니다

Question

getbootstrap.com의 navbar 코드를 jspx 파일에 복사 + 붙여 넣었습니다.

결과는 this입니다.

직접 코드를 jsfiddle에 복사하여 붙여 넣으면 this이됩니다. 코드를 보면

, 내가 중요합니다 어떤 차이가 표시되지 않습니다 : 한 버전에서

• 을, 우리는 <b /> 태그가, 다른, 우리는 <b></b> 태그
• 의 일부가 공백이 다릅니다.
• 일부 속성 순서가 다릅니다.

참고로, 전체 HTML은 다음과 같습니다

작업 버전 :

<div version="2.0"> 
    <nav role="navigation" class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <button data-target="#bs-example-navbar-collapse-1" 
       data-toggle="collapse" class="navbar-toggle" type="button"> 
       <span class="sr-only">Toggle navigation</span><span class="icon-bar" /><span 
        class="icon-bar" /><span class="icon-bar" /> 
      </button> 
      <a href="#" class="navbar-brand">Brand</a> 
     </div> 
     <div id="bs-example-navbar-collapse-1" 
      class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"><a data-toggle="dropdown" 
        class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider" /> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider" /> 
         <li><a href="#">One more separated link</a></li> 
        </ul></li> 
      </ul> 
      <form role="search" class="navbar-form navbar-left"> 
       <div class="form-group"> 
        <input placeholder="Search" class="form-control" type="text" /> 
       </div> 
       <button class="btn btn-default" type="submit">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"><a data-toggle="dropdown" 
        class="dropdown-toggle" href="#">Dropdown <b class="caret" /></a> 
       <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider" /> 
         <li><a href="#">Separated link</a></li> 
        </ul></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

깨진 버전 :

<div version="2.0"> 
    <nav role="navigation" class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <button data-target="#bs-example-navbar-collapse-1" 
       data-toggle="collapse" class="navbar-toggle" type="button"> 
       <span class="sr-only">Toggle navigation</span><span class="icon-bar" /><span 
        class="icon-bar" /><span class="icon-bar" /> 
      </button> 
      <a href="#" class="navbar-brand">Brand</a> 
     </div> 
     <div id="bs-example-navbar-collapse-1" 
      class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"><a data-toggle="dropdown" 
        class="dropdown-toggle" href="#">Dropdown <b class="caret" /></a> 
       <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider" /> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider" /> 
         <li><a href="#">One more separated link</a></li> 
        </ul></li> 
      </ul> 
      <form role="search" class="navbar-form navbar-left"> 
       <div class="form-group"> 
        <input placeholder="Search" class="form-control" type="text" /> 
       </div> 
       <button class="btn btn-default" type="submit">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"><a data-toggle="dropdown" 
        class="dropdown-toggle" href="#">Dropdown <b class="caret" /></a> 
       <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider" /> 
         <li><a href="#">Separated link</a></li> 
        </ul></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

Answer 1

그것은 자기 닫는 태그 문제가있는 것으로 나타났다을 .

이 질문에 대한 답변 : Are (non-void) self-closing tags valid in HTML5?라고합니다.

해결 방법으로 Keep JSPX from creating self closing tags (<div></div> != <div/>)에 대한 답변과 함께 갈 것입니다.