css - mixin 使用時の Bootstrap 2 列の問題

Question

Bootstrap 2 mixins .makeRow() および .makeColumn() を使用して、列 4、3、および 5 を作成しています。これは、12 幅の行全体に相当します。しかし、それは適切に適用されません。これは私が得たもののスクリーンショットです。

マークアップ:

<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>

以下：

.calculators-form-field {
    .makeRow();
    margin-bottom: 10px;

    .calculators-labels {
        .makeColumn(3);

        .calculators-sliders {
            input[type='range'] {
                width: 100%;
            }
            .makeColumn(4);
        }
    }
    .calculators-inputs {
            .makeColumn(5);
    }

}

誰でもこれを修正する方法を教えてもらえますか?