Bootstrap 2 column issues when using mixins

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?

In your HTML all those `calculator` divs are siblings. In your CSS however `.calculators-sliders` is inside `.calculators-labels`. — seven-phases-max, Jan 29 '15 at 10:08
@seven-phases-max good catch. but that didn't fix it either. For some reason the the column width calculations are not correct. They are too big to fit inside a single row. — ChaniLastnamé, Jan 30 '15 at 23:07

score 0 · Answer 1 · edited May 23 '17 at 12:28

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

Bootstrap 2 column issues when using mixins

1 Answers1