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代码来给容器最小宽度。但是，我认为bootstrap可能有更好的方法来处理这个

Answer 1

这是一个众所周知的问题：https://github.com/twbs/bootstrap/issues/13221

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

＆＃34;当列设置为width：8.333333％;, 由于15px填充，列的宽度至少为30px 在任何一方。因此，只有不匹配和浏览器堆叠列＆＃34; - @mdo

在非常小的屏幕上不使用col-xs-1可以避免这个问题。您还应该考虑屏幕是否真实地调整为小于360px。在大多数情况下，它不是。

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

相关：Bootstrap grid breaks in smallest size

Answer 2

对我来说效果很好。但是你的代码缺少一个结束div和几个引号。

<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>
</div>

Bootstrap xs列换行

2 个答案: