Javascript Bootstrap |带有哈希分隔符样式的URL

我正在做一个带有一些锚链接的引导项目。单击它们后，我的css不再工作

HTML:

你可以从中看到它

---

点击“GoToSelection”后，jumbotron松开顶部填充物。当我用firebug禁用然后启用属性时，它会再次工作。

CSS或HTML没有问题。 巨无霸也没有松开它的衬垫。这里实际发生的是。当您单击href值为“#SectionID”的链接“GoToSection”时，它实际上是滚动到

带有ID的节

<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
  <div class="container">
    <h3 id="SectionID">Section With ID</h3>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
  </div>
</div>

.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}    
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}

.jumbotron {
overflow: hidden;
position: relative;
}