Question

通过示例了解Bootstrap，到目前为止创建了此页面，您可以复制粘贴它以重现问题。我的问题是我做错了什么导致Home导航链接高于其他导航链接？

以下是整页：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>              

        <title>Welcome</title>
    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>Test Page Bootstrap 3</h1>
                <p>Watch this page grow as we learn more!</p>
                <a href="#" class="btn btn-primary btn-lg">More Detail <span class="glyphicon glyphicon-chevron-right"></span> </a> 

            </div>
        </div>

        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#">Home</li>
                <li> <a href="#">Menu 1</li>
                <li> <a href="#">Menu 2</li>
                <li> <a href="#">Menu 3</li>
            </ul>
        </div>
    <div class="container">
        <div class="row">

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph1..erfjhjhfdjfhdgfd sfdghfsyfgdfd dsfsdf  dsfsdf 
                dsfdsfsdf ysdff7y er7yf73f ef ffs sf.</p> 
            </div>

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph2...Oh dfifuhyf y fdf erf7yf7ds6 
                dfsdfy  efr98y  efr7y cuhf dfiuhf7 y efyef</p> 
            </div>

            <div class="clearfix visible-md"></div>


            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph3...yey efd dsfij 8777 e4r8ef8c7 3434 f87cersjdkh dffff erer  eee</p> 
            </div>

            <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
                <p> Paragraph4...Test paragrapg1  1233 eff long text lorum spoz</p> 
            </div>

            <div class="clearfix visible-lg"></div>

        </div>
    </div>
</body>

Answer 1

您没有正确关闭代码<a href="#">

以下内容应该解决它：

       <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#">Home</a></li>
                <li> <a href="#">Menu 1</a></li>
                <li> <a href="#">Menu 2</a></li>
                <li> <a href="#">Menu 3</a></li>
            </ul>
        </div>

第一个选项卡的高度与其他选项卡不同

1 个答案: