为什么Bootstrap 4 Grid显示水平滚动体低于623 Why？是虫子吗？

Question

我用的很简单：

<div class="row">
    <div class="col-11"></div>
    <div class="col-1"></div>
</div>

在.container-fluid div中，我想知道当窗口width低于623‘m时，网格为什么会添加水平滚动条？

我想弄清楚，因为我不希望这个发生在我的项目中。

有人知道吗？

这里有一个codepen.io版本来检查它。

Answer 1

在你的语料库里，这是因为“正确”这个词对于第一组来说太大了。

Answer 2

这是因为当窗口达到这个大小时，单词"Right“不适合col-1列。因此，它溢出，这就是为什么会出现水平滚动条。

要解决这个问题，可以使用col-auto而不是col-1。

为了适应列中的内容，col-auto将使列尽可能窄。这也意味着，在这种情况下，列只会被向下推(当它不适合)，您将不会得到任何水平滚动条。