在 Bootstrap 4 中禁用列换行

Posted 2023-03-05

【中文标题】在 Bootstrap 4 中禁用列换行

【英文标题】：Disable column wrapping in Bootstrap 4

【发布时间】：2019-07-22 07:05:23

【问题描述】：

我目前面临以下情况：

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

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

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

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

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

【问题讨论】：

无法复制 - codepen.io/Paulie-D/pen/rROGya

也许this的回答可以帮到你

@Paulie_D 转载在这里 - codepen.io/anon/pen/pYjWOo

white-space:nowrap 是问题所在。这就是你所要求的，这就是你得到的。

@Paulie_D 请问那个 CSS 样式在 OP 的问题中应用在哪里？

【参考方案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 缩小。

【讨论】：

关于你答案的第一部分，flex-nowrap 似乎导致 column2 在行本身之外，在 column1 的右侧，占用了所有空间

width: 0; 在 Firefox 中不起作用。 min-width: 0; 在 Chrome 和 Firefox 中都可以使用。