2012-04-26 80 views
1

我想弄清楚为什么我在引导程序中的scrollspy无法正常工作。我发现部分标签堆叠在一起,无法正确使用子元素。bootstrap.css不会正确渲染节标签

铬合金风格的计算(与其他的browers一起)如下:

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(其我没有编辑)这些部分是他们应该如何。引导程序唯一的作用是将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>标签权利。

回答

3

答案很简单,但花了我数小时才弄清楚。

对于每个<section>标签,您需要在指定<div class="span'somenumber'>之前指定<div class="row">,并且节标签将正确计算。

1

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