2014-01-29 6 views
0

Я скопировал + вставил код навигатора от getbootstrap.com в файл jspx.Twitter Bootstrap Navbar неправильно рисует

Результат выглядит как 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> 

ответ

Смежные вопросы