Question

早上好，伙计们，这只是我在这里的第二个问题，所以请耐心等待我和我的最低要求：

我刚刚写了这篇冗长的消息，说明我如何将ID和class命令放在section而不是container中，为什么突然出现这个部分覆盖了我的css身高风格。然后我想到为什么不用＃替换＃。在CSS文件中，瞧，它再次起作用。

然而，我知道有一个新问题。我有一个固定顶部引导程序导航栏，当我点击名为Intro的第2部分时，该页面仅向下滚动几个像素以显示第一行文本。我原本打算让网站显示整个介绍容器。有什么建议吗？

我希望这是有道理的：

<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" id="navigation">
    <div class="row">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#page-top">Home</a>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#intro">Intro</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
    </div>
</div>
</nav>

<section id="intro" class="intro-section">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-push-1">
                <h1>Welcome to TestZat</h1>

                Lorem....
            </div>
        </div>
    </div>
</section>

<section id="login" class="login-section">
    <div class="container"> 
        <div class="row">
            <div class="col-md-10 col-md-push-1">
                <h1>Finde das Login script hier</h1>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact-section">
    <div class="container" id="contact-section">
        <div class="row">
            <div class="col-md-10 col-md-push-1" id="contact">
                Section content TBD
            </div>
        </div>
    </div>
</section>

Answer 1

现在它可以正常工作......只需从容器中删除id。

    <body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div  id="navigation">
    <div class="row">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#page-top">Home</a>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#intro">Intro</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
    </div>
</div>
</div>
</nav>

<section id="intro" class="intro-section">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-push-1">
                <h1>Welcome to TestZat</h1>

                Lorem....
            </div>
        </div>
    </div>
</section>

<section id="login" class="login-section">
    <div class="container"> 
        <div class="row">
            <div class="col-md-10 col-md-push-1">
                <h1>Finde das Login script hier</h1>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact-section">
    <div class="container" id="contact-section">
        <div class="row">
            <div class="col-md-10 col-md-push-1" id="contact">
                Section content TBD
            </div>
        </div>
    </div>
</section>

部分ID＆amp;类定义覆盖容器高度

1 个答案: