Странное расстояние в twitter bootstrap top navbar

Я использовал Twitter Bootstrap, чтобы создать навигационную панель поверх страницы с несколькими раскрывающимися меню. По какой-то причине первый элемент списка выравнивается к нижней части панели в силу пустой ссылки, которая заполняет верхнее пространство. Я скопировал этот первый термин для других элементов списка, но ни один из других элементов не выровнялся низу или не имел пустую ссылку. Любые идеи о том, как я могу это исправить?Странное расстояние в twitter bootstrap top navbar

<!DOCTYPE html> 
<html> 
<head> 
    <title>Nav Mockup</title> 
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<body> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 
    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 

      <a href="#" class="navbar-brand">NCTL<a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="collapse navbar-collapse navbarHeaderCollapse"> 

       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >About NCTL <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Challenge/Links</a></li> 
          <li><a href="#">STEM Equity</a></li> 
          <li><a href="#">Slannis Message</a></li> 
          <li><a href="#">Supporters</a></li> 
          <li><a href="#">MOS Press Room</a></li> 
         </ul> 
        </li>     
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Education Programs <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">K12 Classroom</a></li> 
          <li><a href="#">Museum Based</a></li> 
          <li><a href="#">Traveling</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Advocacy <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Achievements</a></li> 
          <li><a href="#">Resources</a></li> 
          <li><a href="#">Video Links</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" >News <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Enews Archive</a></li> 
          <li><a href="#">NCTL Studies</a></li> 
          <li><a href="#">Media Coverage</a></li> 
         </ul> 
        </li> 
       </ul> 

      </div> 

     </div> 
    </div> 

</body> 
</html>

источник

2015-07-23 LukasMetlicka

Вы ошибка в разметке

<a href="#" class="navbar-brand">NCTL<a>

Должно быть:

<a href="#" class="navbar-brand">NCTL</a>

DEMO HERE

источник

2015-07-23 14:27:59

Странное расстояние в twitter bootstrap top navbar

ответ

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