Bootstrap xs 列换行

Posted 2023-03-14

【中文标题】Bootstrap xs 列换行

【英文标题】：Bootstrap xs columns wrap

【发布时间】：2016-04-22 07:58:48

【问题描述】：

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

【问题讨论】：

格式良好的代码对于成功的软件开发至关重要。考虑使用为您完成此操作的编辑器，以及突出显示和错误检查。

【参考方案1】：

它对我很有效。但是您的代码缺少结束 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>

【参考方案2】：

这是一个已知问题：https://github.com/twbs/bootstrap/issues/13221

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

"当列设置为宽度：8.333333%;时， 由于 15px 填充，列将至少为 30px 宽 在任一侧。因此，存在不匹配，浏览器只是 堆叠列” - @mdo

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

---

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

---

相关：Bootstrap grid breaks in smallest size