单页 bootstrap 网站跳过部分

Question

我目前正在使用 Bootstrap 开发那些单页 portfolio-like 网站之一，并且运行遇到了一个烦人的问题。

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

它是这样显示的：

这是我希望它出现的样子：

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

          <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

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

Answer 2

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

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

Answer 3

可能有很多情况会导致您的锚 link 无法正常显示。鉴于您的示例，最安全的假设（也是我最常犯的错误）是当我的导航栏固定时忘记将顶部填充添加到我的 body 元素。

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

如果不是这种情况，CSS Tricks 有一篇关于锚链接及其行为的很棒的文章，可以找到 here。

文章提供了几个示例，"tricks" 使处理锚点位置变得更容易。总之，您应该在标题中包含锚点 (id="submissions")，如下所示：

<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 允许您以不同的量向跨度添加负顶部边距，并向标题添加正底部边距，以将锚点准确定位到您想要的位置。

这个 "trick" 在语义和其他几个方面有明显的缺陷，但文章中也提供了一个 "CSS-Only" 技巧，当然它不太受旧浏览器的支持。

Answer 4

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="btn-submission" href="javascript:void(0)">Submission</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="submission">
  <h2>Submission</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lectus vitae enim tincidunt pellentesque. Fusce felis lorem, laoreet quis quam eget, sagittis ornare massa. Vivamus sit amet massa sit amet lacus efficitur feugiat elementum a massa. Nunc id fermentum turpis. Phasellus in molestie nulla. Pellentesque eget sem non velit tempus vestibulum in ac tortor. Aliquam ultricies diam ut dui ullamcorper, et scelerisque felis consectetur. In auctor massa ac turpis tristique lacinia. Maecenas quis suscipit neque.
</p></div>
<div id="others">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lectus vitae enim tincidunt pellentesque. Fusce felis lorem, laoreet quis quam eget, sagittis ornare massa. Vivamus sit amet massa sit amet lacus efficitur feugiat elementum a massa. Nunc id fermentum turpis. Phasellus in molestie nulla. Pellentesque eget sem non velit tempus vestibulum in ac tortor. Aliquam ultricies diam ut dui ullamcorper, et scelerisque felis consectetur. In auctor massa ac turpis tristique lacinia. Maecenas quis suscipit neque.</div>

单页 bootstrap 网站跳过部分

Single page bootstrap website skipping sections

jquery

html

css

twitter-bootstrap

portfolio