Is bootstrap less mixin.makeColumn smaller than span?
I'm using bootstrap with less and I'm currently trying to do web semantics.
The HTML part:
<!-- our new, semanticized HTML -->
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
Smaller 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 look at the rendered html page ... my article takes up less space than span12
I can also put .makeColumn(10)
and .makeColumn(4)
and it stays on one line. As if it was a 14 grid column instead of 12 columns.
Did I miss something?
source to share
Not. If the number of columns is required n
, mixin .makeColumn
and .span (#grid > .core > .span)
mixin calculate the width as follows:
(@gridColumnWidth * n) + (@gridGutterWidth * (n-1))
which is the width required to fit your element to the width of n columns in the grid.
If n = 6
, it calculates the column widths and gutter widths from the left edge of your grid to the right edge of column 6. 6 columns and 5 gutters.
.span
width only, .makeColumn
also adds float: left
and has an optional @offset argument, which is not important for your current problem, but which allows you to add columns to the left of the element by adding margin: left
.
As @sody said, moving existing elements to .container should fix your problem. And I agree with @kleinfreund on using 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 this helps.
source to share