Bootstrap XS列包装

Question

对于最小的xs大小，即使我的列加起来等于12，如果屏幕宽度减小到某个限制之外，它们也不会按预期工作。例如：-

<div class="container">
    <div class="row">
           <div class="col-xs-2">
           </div>
           <div class="col-xs-1 col-xs-offset-8>
            </div>
            <div class="col-xs-1>
           </div>
     </div>

我希望如果减小尺寸，最后一列将堆积到屏幕末端。然而，这种情况并非如此。当屏幕减小到超过特定限制时，最后一列将朝屏幕的开头逐渐结束。我已经考虑过编写CSS代码来赋予容器最小宽度。但是，我认为引导程序可能有更好的方法来处理此问题

Answer 1

在屏幕宽度<360px处，.col-xs-1列开始换行，因为..

“虽然将列设置为宽度：8.3333333％；但是由于两边的填充均为15px，所以列的宽度至少为30px。因此，存在不匹配，浏览器只是将列堆叠在一起”-@mdo

通过不在col-xs-1非常小的屏幕上使用，可以避免此问题。您还应该考虑是否将屏幕调整为小于360像素。在大多数情况下不是。

注意：在 Bootstrap 4中 ，col-xs-1现在是col-1。