我试图弄清楚为什么我的引导程序中的滚动间谍不起作用。我发现部分标签是堆叠的,并且不能与它们的子元素一起正常工作。
Chromes计算样式(连同其他浏览器)如下:
background-color: transparent;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 0px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 940px;
但是其中的数据<section>
计算为:
background-color: transparent;
color: #333;
display: block;
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 317px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 0px;
width: 780px;
如果我注释掉 bootstrap.css (我没有编辑过),这些部分就是它们应该的样子。bootstrap 做的唯一事情是它设置section
为block
.
我想知道我的 HTML 是否会导致问题。我的页面布局是:
<body>
<div class="container">
<header>
<h1>HEADER</h1>
<nav>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#overview">Introduction</a></li>
<li><a href="#begin">The Beginning</a></li>
...
</ul>
</div>
</nav>
</header>
<section id="overview">
<div class="span10">
<h2>Introduction</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
<section id="begin">
<div class="span10">
<h2>The Beginning</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
...
</div>
<script>..</script>
</body>
所有部分仅以 1px 的间距相互堆叠。bootstrap.css 是什么导致了这个问题。这个还是我的布局?我已经用 javascript 样式编辑了每个变量,它直接指向 bootstrap.css。请帮我。
更新
我写了一个简单的页面,但它仍然不能<section>
正确计算标签。