Home/ Questions/Q 7846237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:30:46+00:00

I am trying to figure out why my scrollspy in bootstrap wasn’t working. I

  • 0

I am trying to figure out why my scrollspy in bootstrap wasn’t working. I found out that section tags are stacked and not working correctly with their child elements.

Chromes computed style (along with other browers) is as follows:

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;

But the data within the <section> is computed as:

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;

If I comment out bootstrap.css (which I have not edited) the sections are how they should be. The only thing bootstrap does is that it sets section to block.

I wonder if my HTML could be causing the problem. My page layout is:

<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>

All sections are just stacked on each other 1px apart. What is bootstrap.css is causing this problem. This or my layout? I’ve edited out every variable with javascript styles, and it leads right to the bootstrap.css. Please help me.

update

I have written a simple page and it still doesn’t compute the <section> tag right.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The answer to this is very simple but took me hours to figure out.

    For each <section> tag you need to specify <div class="row"> before specifying <div class="span'somenumber'> and the section tag will compute correctly.

    • 0