Web Essentials 使用多个引导列引发警告

Question

当我使用以下代码时，它按预期工作，但 Web Essentials（更新 2 的 2013 年）显示错误：引导：col-xs-12 类型的列的总和不得超过 12。我的意图是只显示一个xs 模型中的列。有什么建议吗？

    <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="well">
            DIV1
        </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="well">
           DIV2
        </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="well">
            DIV3
        </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="well">
            DIV4
        </div>
    </div>
    </div>

Answer 1

嗯，从技术上讲，您的课程是正确的，应该会产生您想要的结果。但是，在您的情况下，col-xs-12 实际上是不必要的（也许这就是 Web Essentials 所犹豫的，尽管在我看来它仍然是一个不正确的错误）。

由于 Bootstrap 3 是移动优先的，默认行为是所有内容都是容器宽度的 100%向上，直到到达具有指定 col 类的断点为止。例如，如果您删除了 col-xs-12 和 col-sm-6，那么直到 md 断点（默认为 992px）的所有内容都将是容器宽度的 100%。

发生的情况是每个 col 类都向左/向右应用 15px 的填充。然后，在每个断点处，媒体查询将百分比宽度应用于列。例如，如果您有 col-lg-3，没有其他内容，则无论视口有多宽，该列都会获得填充。如果视口恰好是 1200 像素或更大，则该断点的媒体查询会添加一条规则，将 col-lg-3 设置为 25% 的宽度。

所以，这意味着您可以使您的标记更加简洁，并且只要您为您的列指定至少一个 col-- 类型类，它就会很好地对齐你的网格。