Twitter Bootstrap頂部導航欄中的奇怪間距

Question

我一直在使用Twitter Bootstrap在具有多個下拉菜單的頁面頂部創建導航欄。 出於某種原因，第一個列表元素通過填充頂部空間的空鏈接與條形底部對齊。 我為其他列表項復制了該第一項，但其他元素均未與底部對齊或具有空鏈接。 關於如何解決此問題的任何想法？

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

Answer 1

您的標記有誤

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

應該：

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

此處演示

Twitter Bootstrap頂部導航欄中的奇怪間距

問題描述

1 個解決方案

解決方案1
3 已采納 2015-07-23 14:27:59

Twitter Bootstrap頂部導航欄中的奇怪間距

問題描述

1 個解決方案

解決方案1 3 已采納 2015-07-23 14:27:59

解決方案1
3 已采納 2015-07-23 14:27:59