意外的col-sm布局

Question

我有一行和几列。 Xs和md布局似乎可以正常工作，但是由于某种原因，使用md布局我得到了this resuly。为什么？这是代码（bootstrap 3.3.7）：

[class^="col"] {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row" id="NewStyle" style="display:inline;">
    <div class="col-md-12 col-xs-12" style="padding-left: 0px;">
        <!--...-->
        1
    </div>

    <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0px; padding-right: 0px;">
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            2
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            3
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            4
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            5
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            6
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            7
        </div>
        <div class="col-md-3 col-sm-4" style="padding-left: 2px; padding-right: 2px;">
            <!--...-->
            8
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>