Twitter Bootstrap Navbar绘制不正确

Question

我已将getbootstrap.com的导航条代码复制并粘贴到我的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/>)的答案作为解决方法。