CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Kyle Monti
Kyle Monti

Reputation: 704

bootstrap.css does not render section tags correctly

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.

Upvotes: 1

Views: 4255

Answers (2)

eSearing
eSearing

Reputation: 11

Possibly try <section id="overview" class="row">

Upvotes: 1

Kyle Monti
Kyle Monti

Reputation: 704

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.

Upvotes: 4

Related Questions