Question

我想弄清楚为什么我的自助卷轴不起作用。我发现部分标签是堆叠的，并且与子元素无法正常工作。

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>标签。

Answer 1

答案很简单，但花了我几个小时才弄明白。

对于每个<section>代码，您需要在指定<div class="row">之前指定<div class="span'somenumber'>，并且部分代码将正确计算。

Answer 2

可能会尝试<section id="overview" class="row">

bootstrap.css不能正确呈现节标签

2 个答案: