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

Question

我正在使用带有 xs 断点的 Twitter Bootstrap。一切正常，除非用户缩小，然后不包含数据的列意外折叠。

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

这是在谷歌浏览器中放大 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>

最奇怪的是，如果我进一步缩小到 80%，列会像 100% 视图一样恢复正常。似乎只发生在 Google Chrome 中（在撰写本文时，我们使用的是最新版本 45.0.2454.85 m）。我和我的开发团队难住了。知道发生了什么吗？

Answer 1

如果您的列不包含任何数据，请在其中放置一个不间断的空格。

例如：

<div class="col-xs-2"> </div>

那么该列将不再折叠。