Bootstrap 2 column issues when using mixins - css

Question

I am using Bootstrap 2 mixins .makeRow() and .makeColumn() to make columns 4,3 and 5 which equals to a full row span 12 width. But it doesnt get applied properly. This is a screenshot of what I get.
Markup:
<div class="calculators-form-field credit-amount">
<div class="calculators-labels">
<label>Your monthly budget <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
<a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget">
</div>
<div class="calculators-inputs">
<div class="input-group input-prepend">
<span class="input-group-addon add-on">$</span>
<input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget">
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div>
</div>
Less:
.calculators-form-field {
.makeRow();
margin-bottom: 10px;
.calculators-labels {
.makeColumn(3);
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn(4);
}
}
.calculators-inputs {
.makeColumn(5);
}
}
Can anyone tell me how to fix this?

Answer 1

Firstly notice that you can not compile Bootstrap 2 with the latest version of Less without modifications, see: Less v2 does not compile Twitter's Bootstrap 2.x
Secondly i think #seven-phases-max is right;
#import "bootstrap3/bootstrap-2.3.2/less/bootstrap.less";
.calculators-form-field {
.makeRow();
margin-bottom: 10px;
.calculators-labels {
.makeColumn(3);
}
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn(4);
}
.calculators-inputs {
.makeColumn(5);
}
}
Compiles into CSS as follows:
.calculators-form-field {
margin-left: -20px;
*zoom: 1;
margin-bottom: 10px;
}
.calculators-form-field:before,
.calculators-form-field:after {
display: table;
content: "";
line-height: 0;
}
.calculators-form-field:after {
clear: both;
}
.calculators-form-field .calculators-labels {
float: left;
margin-left: 20px;
width: 220px;
}
.calculators-form-field .calculators-sliders {
float: left;
margin-left: 20px;
width: 300px;
}
.calculators-form-field .calculators-sliders input[type='range'] {
width: 100%;
}
.calculators-form-field .calculators-inputs {
float: left;
margin-left: 20px;
width: 380px;
}
The above CSS code seems to work well for the default 940px grid, see also:
http://codepen.io/anon/pen/ogoyZW
In the situation that you use responsive grids the above does not work as expected. You can not reuse the .makeColumn() and .makeRow mixins due to https://github.com/less/less.js/issues/2435. You can try to create new mixins like that shown below:
.makeRow-responsive() {
.gutter(#GutterWidth) {
margin-left: #GutterWidth * -1;
}
.clearfix();
.gutter(#gridGutterWidth);
#media (min-width: 1200px) {
.gutter(#gridGutterWidth1200);
}
#media (min-width: 768px) and (max-width: 979px) {
.gutter(#gridGutterWidth768);
}
}
.makeColumn-responsive(#columns: 1, #offset: 0) {
.set(#width; #GutterWidth) {
margin-left: (#width * #offset) + (#GutterWidth * (#offset - 1)) + (#GutterWidth * 2);
width: (#width * #columns) + (#GutterWidth * (#columns - 1));
}
float: left;
.set(#gridColumnWidth;#gridGutterWidth);
#media (min-width: 1200px) {
.set(#gridColumnWidth1200,#gridGutterWidth1200);
}
#media (min-width: 768px) and (max-width: 979px) {
.set(#gridColumnWidth768,#gridGutterWidth768);
}
}
You can now call the above mixins as follows:
.calculators-form-field {
.makeRow-responsive();
margin-bottom: 10px;
.calculators-labels {
.makeColumn-responsive(3);
}
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn-responsive(4);
}
.calculators-inputs {
.makeColumn-responsive(5);
}
}
Example: http://www.bootply.com/CJtufRFlI2