Visual studio Web essentials通过多个引导列引发警告

当我使用以下代码时，它按预期工作，但Web Essentials（2013年更新2）显示了一个错误：引导：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>

第一组
第二组
第三组
第四组

从技术上讲，您的类是正确的，应该会产生您想要的结果。然而，在您的情况下，

col-xs-12

实际上是不必要的（也许这就是Web Essentials所回避的，尽管在我看来这仍然是一个错误）

由于bootstrap3是mobile-first，默认行为是所有内容都是容器宽度的100%up，直到到达具有指定col类的断点。例如，如果删除了col-xs-12和col-sm-6，那么直到md断点（默认为992px）的所有内容都将是容器宽度的100%

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

---

因此，这意味着您可以使标记更加简洁，只要为列指定至少一个col--type类，它就会在网格中很好地对齐。

谢谢，这很有意义。你能告诉我我是一个有Bootstrap的noob吗？这段代码的正确标记是什么，lg为4列，md为3列，sm为2列？只需删除这个col-xs-12？是的，这正是我要做的（从每个div中删除col-xs-12）。这将导致：1列达到767px，2列从768px开始，3列在992px，4列在1200px。