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

Question

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

这是Google Chrome的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>

最奇怪的是，如果我缩小到80％，那么柱子会像100％视图一样恢复正常。似乎只发生在谷歌浏览器中（我们在撰写本文时使用的是最新版本45.0.2454.85米）。我和我的开发团队难过。知道发生了什么事吗？

Answer 1

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

例如：

＆＃13;

＆＃13;

<div class="col-xs-2">&nbsp;</div>

＆＃13;

＆＃13;

＆＃13;

然后该列将不再崩溃。