Css Twitter Bootstrap 3网格系统，缩小时列意外折叠

我正在使用带有xs断点的Twitter引导。一切正常，但当用户缩小时，不包含数据的列会意外折叠

这是谷歌浏览器的100%放大：

这是Google Chrome的90%放大率：

代码如下：

<div class="row">
    <div class="col-xs-1">
        <button type="button" class="btn btn-danger btn-primary btn-lg" ng-click="po.showPOHeaderAlertsDialog(order)" ng-disabled="order.orderHeader.messages.length === 0 || order.orderHeader.messages === null" analytics-on analytics-category="UI Events - Cart Page" analytics-event="View PO Header Menu Alerts">
            <i class="fa fa-bell"></i>
        </button>
    </div>
    <div class="col-xs-2">{{order.orderNumber}}</div>
    <div class="col-xs-2">
        <div>{{(order.orderHeader.totalContCost | currency) || '$0.00'}} (CNT)</div>
        <div>{{(order.orderHeader.totalNonContCost | currency) || '$0.00'}} (OFF)</div>
    </div>
    <div class="col-xs-2">{{order.orderHeader.deptDesc}}</div>
    <div class="col-xs-2">{{order.orderHeader.glDesc}}</div>
    <div class="col-xs-2">{{order.orderHeader.blankNo}}</div>
    <div class="col-xs-1">
        <button type="button" class="btn btn-primary btn-lg" ng-click="po.showPOHeaderEditDialog(order)" ng-disabled="!po.isCartEditable || po.shouldLockCart()" analytics-on analytics-category="UI Events - Cart Page" analytics-event="Edit PO Header Menu">
            <i class="fa fa-pencil-square-o"></i>
        </button>
    </div>
</div>

{{order.orderNumber}
{（order.orderHeader.totalContCost | currency）| |'$0.00'}}（CNT）
{{（order.orderHeader.totalNoncotcost | currency）| |'$0.00'}}（关闭）
{order.orderHeader.deptDesc}
{order.orderHeader.glDesc}
{{order.orderHeader.blankNo}

---

最奇怪的是，如果我进一步缩小到80%，列将恢复正常，就像在100%视图中一样。似乎只有Google Chrome才会出现这种情况（在撰写本文时，我们使用的是最新版本45.0.2454.85 m）。让我和我的开发团队陷入困境。你知道发生了什么吗？

如果你的专栏中没有任何数据，请在其中加一个不间断的空格

例如：

---

我确实有条件地放了一个

来解决这个问题，但我觉得很奇怪，它在100%和80%缩放下工作，但不是90%。