引导 |带有哈希分隔符样式的 URL

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

.HTML：

<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>

.CSS：

.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;
}

你可以在这把小提琴中看到它。

点击"GoToSelection"后，.jumbotron 会松开它的填充顶部。当我禁用然后启用带有火虫的属性时，它会再次醒来。