Bootstrap 4 列不换行布局：两列宽度分配不符合预期求助

嘿，我知道你现在遇到的问题——默认的col类会均分行宽，导致两列各占50%，完全不符合你要的“第一列不换行占约80%、第二列右对齐”的需求。别担心，我给你两个实用的解决方案，适配不同的场景：

方案一：固定比例（接近80%/20%） #

如果你希望第一列稳定占约80%的宽度（用Bootstrap 12列网格的col-9来实现75%，已经很接近80%），同时文本不换行，第二列右对齐，代码如下：

<div className="row border">
  <!-- 第一列：占9份宽度，文本强制不换行 -->
  <div className="col-9 text-nowrap border">
    <small className="text-muted">{trans.payee} - {trans.category}</small>
  </div>
  <!-- 第二列：占3份宽度，内容右对齐 -->
  <div className="col-3 text-right border">
    {trans.amount}
  </div>
</div>

关键类说明： #

• col-9/col-3：基于Bootstrap 12列网格系统分配宽度，分别占行宽的75%和25%，比例接近你要的80%/20%
• text-nowrap：强制第一列的文本不会自动换行，保持一行展示
• text-right：让第二列的金额内容右对齐

方案二：灵活按需分配宽度 #

如果你想要第一列尽可能占用剩余空间（但文本不换行），第二列只占自身内容的宽度（更贴合“按需占用最少/最多空间”的需求），可以用flex相关的辅助类：

<div className="row border">
  <!-- 第一列：自动填充剩余空间，文本不换行 -->
  <div className="col flex-grow-1 text-nowrap border">
    <small className="text-muted">{trans.payee} - {trans.category}</small>
  </div>
  <!-- 第二列：仅占内容所需宽度，内容右对齐 -->
  <div className="col-auto text-right border">
    {trans.amount}
  </div>
</div>

关键类说明： #

• flex-grow-1：让第一列自动填充行内除第二列之外的所有剩余空间
• col-auto：让第二列的宽度完全由内部金额内容决定，不会浪费多余空间
• text-nowrap：同样保证第一列的描述文本始终在一行

另外，注意你原来的代码里可能存在列嵌套错误——第二列被放在了第一列的div内部，这也会导致布局错乱，上面的两个方案都修正了这个结构问题，确保两列是row的直接子元素。

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