IE和边缘上的bootstrap xs网格错位

Question

代码：

<div style="width:310px">
    <div class="row">
        <div class="col-xs-3">
            test
        </div>
        <div class="col-xs-4">
             <input class="form-control"/>
        </div>

        <div class="col-xs-1">
        ~
        </div>

        <div class="col-xs-4">
            <input class="form-control"/>
        </div>
    </div>
</div>

使用所有12列的非常简单的行。对于小屏幕上方的视图，此行没有问题，但在超小（xs）下它不对齐。

此错误在最新IE（在Win 7和10上测试）和Edge

下可重现

我想知道是什么造成了它，有没有办法解决这个问题？