Question

我目前正在使用Bootstrap处理其中一个单页组合类似的网站，并遇到了令人讨厌的问题。

我使用导航栏上的按钮转到单页网站的特定部分，但由于某种原因，其中一个部分的标题被截断。

以下是它的显示方式：

以下是我希望看到的内容：

不确定是否相关，但这是导航栏上按钮的代码：

          <div class="collapse navbar-collapse" id="navbar-collapse-1" >

            <ul class="nav navbar-nav">
                <li><a class="navbar-brand" href="#">Website name</a></li>

                <li>
                    <a href="#about" >About Us</a>
                </li>
              <li>
                <a href="#submissions">Submissions </a>
              </li>
              <li>
                <a href="#contact">Contact Us </a>
              </li>
        </ul>

以下是“提交”部分的初始代码：

    <section id="submissions" class="submissions">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center"><h2>Submissions</h2></div>
            <div class="col-lg-12">

（其下的一切只是内容并关闭所有标签。）谢谢！

Answer 1

如果它是一个固定的导航栏，您需要考虑它占用的空间并添加填充。导航栏固定后，它不是DOM的一部分，因此您的章节标题将显示在屏幕顶部，但隐藏在导航栏下。

尝试将body {padding-top：50px}添加到您的css中，看看是否允许显示章节标题。

Answer 2

快速解决方法是在第一部分的顶部添加间隔（可能<div>宽度某个特定高度）

Answer 3

可能有很多情况说明为什么你的锚链没有正确显示。举个例子，最安全的假设（以及我最常犯的错误）就是忘记在导航栏修复时为我的body元素添加顶部填充。

Gavgrif的答案解决了这个问题。

如果不是这种情况，那么CSS Tricks有一篇关于Anchor Links及其行为的精彩文章，可以找到here。

这篇文章给出了几个例子和＆＃34;技巧＆＃34;这使得处理锚位置更容易。总之，您应该在标题内包含锚点（id =＆＃34;提交＆＃34;），如下所示：

<section class="submissions">
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
          <h2>
              <span name="submissions" id="submissions"></span>
              Submissions
          </h2>
        </div>
    <div class="col-lg-12">

此HTML允许您向范围添加负上边距，并以不同的数量向标题添加正底边距，以将锚点精确定位到您想要的位置。

这个＆＃34;技巧＆＃34;它在语义和其他几个方面有明显的缺陷，但也有一个＆＃34; CSS-Only＆＃34;文章中提供的技巧被旧版浏览器支持。

Answer 4

嗨，我相信导航菜单位于固定位置。你可以将你的id =“submission”移动到容器内的元素。或者你可以使用jquery来制作像这样的更酷的东西

try catch finally

$("#btn-submission").click(function() {
		 $('html, body').animate({
			 scrollTop: $('#submission').offset().top - 50
		 }, 500);
	});

单页引导程序网站跳过部分

4 个答案: