I can replace this code with
<div class="row">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
With this, to make it more semantic
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.makeRow();
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
How can I do this with the fluid grid though:
<div class="row-fluid">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
<!-- Less stylesheet -->
.article {
???
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
I have tried:
.article { #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);}
and some variations on it from some related stackoverflow posts but its not getting responsive.
I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.
To fix it, I just extended the .makeColumn() mixin in a LESS file that loads after the Boostrap files.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
Use them just like the non-fluid mixins:
Ok, I think I have got it. I am updating the question to add offsets with the fluid layout as this is where I ran into the most trouble.