使用混合时的Bootstrap 2列问题

Question

我使用Bootstrap2Mixin .makeRow()和.makeColumn()来生成列4、3和5，这等于一个完整的行跨度12的宽度。但是它没有得到正确的应用。This is a screenshot of what I get。

标记：

<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);
    }

}

有人能告诉我怎么解决这个问题吗？

Answer 1

首先请注意，如果不进行修改，您无法使用最新版本的Less编译Bootstrap2，请参阅：Less v2 does not compile Twitter's Bootstrap 2.x

其次，我认为“七阶段-最大值”是正确的；

@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);
    }

}

编译为CSS，如下所示：

.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;
}

上面的CSS代码对于默认的940px网格似乎工作得很好，另请参阅：http://codepen.io/anon/pen/ogoyZW

在使用响应式网格的情况下，上述方法无法按预期工作。由于https://github.com/less/less.js/issues/2435的原因，您不能重用.makeColumn()和.makeRow混合。您可以尝试创建新的混入，如下所示：

.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);
  }

}

您现在可以按如下方式调用上述混入：

.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);

    }

}

示例：http://www.bootply.com/CJtufRFlI2