Question

我正在开发一个带有一些锚点链接的Bootstrap项目。点击它们后，我的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;
}

您可以在this fiddle中看到它。

点击'GoToSelection'后，.jumbotron就会失去它的填充顶部。当我禁用然后使用firebug启用该属性时，它再次开始。

Answer 1

CSS或HTML没有任何问题。 jumbotron也没有失去它的填充物。这里真正发生的是那个。当你点击链接＆＃34; GoToSection＆＃34;它有一个href值＆＃34;＃SectionID＆＃34;，它实际上滚动到了 bugs。

Bootstrap |具有散列符样式的URL

1 个答案: