在 Bootstrap 4 中禁用列换行

Question

我目前面临以下情况：

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

因此，第一列将占用第二列未填充的可用空间

即 [ |--------column1--------| |第2栏| ]

我的问题是column1 中的内容的宽度大于包含行的宽度。发生的情况是，column1 不是缩小以仍然适合同一行中的两列，而是column1 填充整行，就好像它是 col-12 和 column2 下降到一个新行，因此包装列.

有没有办法防止这种行为并始终将两列保持在同一行？

Answer 1

通常可以在行上使用flex-nowrap 类以防止在 Bootstrap 4 中进行 col 换行。在这种情况下，由于列中的宽省略号内容，这将不起作用。

由于计算 flexbox 宽度的方式（解释为 here 和 here），您应该设置 width、min-width 或 max-width（任何宽度） flex-grow:1 列 (col)。

例如，在col 上设置width:0...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

https://codeply.com/go/JKLUD0NLn4

另外，不要在同一列上同时使用 col 和 col-auto。 flex-grow:1 的 col 将防止 col-auto 缩小。