0

我正在使用 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);
    }

}

谁能告诉我如何解决这个问题？

4

1 回答 1

0

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

其次，我认为@seven-phases-max 是正确的；

@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()和mixins 。您可以尝试创建新的 mixin，如下所示：.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);
  }

}

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

.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

于 2015-02-08T12:20:38.913 回答