javascript - Strange spacing in twitter bootstrap top navbar -


i've been using twitter bootstrap create navbar across top of page has several dropdown menus. reason, first list element aligns bottom of bar virtue of empty link fills top space. copied first term other list items, none of other elements align bottom or have empty link. ideas how can fix this?

<!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> 

a screenshot of issue

you error in markup

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

should be:

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

demo here


Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

Nuget pack csproj using nuspec -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -