2012-04-26 105 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">