is bootstrap less mixin .makeColumn smaller than a span?

Question

I'm using bootstrap with less and I'm currently trying to make web semantic.

HTML part:

<!-- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

Less part:

/* its accompanying Less stylesheet */
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

But when I take a look at the rendered html page... my article take less space than a span12

I can also put a .makeColumn(10) and .makeColumn(4) and it will stay on the same line. It's like it was a 14 grid column and not a 12 grid column.

Am I missing something?

Answer 1

No. If your required number of columns is n, the .makeColumn mixin and the .span (#grid > .core > .span) mixin both calculate width as follows:

(@gridColumnWidth * n) + (@gridGutterWidth * (n-1))

which is the width you'll need to set your element to a width of n columns on the grid.

If n = 6, it calculates all column widths and gutter widths from the left edge of your grid to the right-hand edge of column 6. 6 columns and 5 gutters.

.span only does width, .makeColumn also adds a float: left, and has an optional @offset argument that which isn't important to your current problem, but which allows you to add columns to the left of the element by adding a margin: left.

As @sody says above, wrapping your existing elements in a .container should fix your problem. And I agree with @kleinfreund on using the html elements where you can:

<div class="container">
    <article>
        <div class="main-section">Bootstrap rocks
            <aside>
                 By the way...
            </aside>
        </div>
    </article>
</div>

I hope that helps.