Bootstrap 4行在小设备换行问题咨询：列总和为12仍换行

你遇到的这个换行问题，核心原因是Bootstrap 4的列默认带有min-width: auto属性。当列内的内容（比如你的"IMAGE"、"Account info"这些文本）无法自动换行时，会强制列的宽度大于你设定的col-*宽度，导致所有列的总宽度超过了父容器row的100%宽度，最终触发换行。

举个例子，你的col-1在小屏幕上的宽度是父容器的8.33%，但"IMAGE"这个文本的最小宽度可能已经超过了这个比例，它会把列撑开，让列的实际宽度比设定值大，这样所有列加起来就超过了100%的宽度，自然就会换行。

有几种简单的方案可以解决这个问题：

方案1：强制列内容换行或截断 #

给列添加Bootstrap内置的类，让内容可以适应列的宽度：

• 如果允许文本换行：给列添加text-wrap类（Bootstrap 4.3+版本支持）
• 如果想截断文本显示省略号：给列添加text-truncate类（Bootstrap已封装了white-space: nowrap和overflow: hidden的配套样式）

方案2：自定义CSS强制列收缩 #

给列添加自定义样式，覆盖默认的min-width限制，让列可以被压缩到设定的宽度：

.custom-col {
  min-width: 0;
  flex-shrink: 1;
}

然后给所有列加上这个custom-col类即可。

修改后的示例代码 #

这里用方案1的text-wrap来调整你的代码，保证小屏幕下不会换行：

<div class="row" style="background-color:red;">
  <div class="col-1 text-wrap" style="background-color: #0F0"> IMAGE </div>
  <div class="col-4 text-wrap" style="background-color: #0D0"> Account info </div>
  <div class="col-4 text-wrap" style="background-color: #0B0"> Account Name </div>
  <div class="col-3 text-wrap" style="background-color: #090"> IsValid or not </div>
</div>

如果你的列里包含图片，还可以给图片添加img-fluid类，让图片自适应列的宽度，避免撑开列导致换行。

内容的提问来源于stack exchange，提问作者MortalFool