Css 引导-列xs正在崩溃

阅读bootstrap3文档，它说col xs-*列始终水平显示，并且从不折叠/堆叠

但我遇到了一个问题，它实际上正在崩溃

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <div class="row" style="background-color: olive">
                <div class="col-xs-1">
                    <div style="border:1px solid black">8</div>
                </div>
                <div class="col-xs-6">
                    <div style="border:1px solid black">
                        text
                    </div>
                </div>
                <div class="col-xs-5">
                    <div style="border:1px solid black">
                        more text
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-7">
            <div style="background-color: #ccc:">hello world</div>
        </div>
    </div>
</div>

我在和嵌套的col一起工作

首先，我将视口分为两列

然后我在其中一列中嵌套了一个col-xs网格。我原以为这个xs网格永远不会崩溃，但它正在崩溃

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <div class="row" style="background-color: olive">
                <div class="col-xs-1">
                    <div style="border:1px solid black">8</div>
                </div>
                <div class="col-xs-6">
                    <div style="border:1px solid black">
                        text
                    </div>
                </div>
                <div class="col-xs-5">
                    <div style="border:1px solid black">
                        more text
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-7">
            <div style="background-color: #ccc:">hello world</div>
        </div>
    </div>
</div>

---

问题是：

请检查，我相信公认的答案会解决您的问题。这是有道理的，因此问题在于col-xs-1，由于默认填充，它永远不会导致盒子小于30px。