Bootstrap嵌套网格问题：让右侧列按最宽子列自适应宽度

需要实现这样的网格布局：

• 在sm及以上屏幕：左侧列占据剩余空间，右侧列宽度随内容自适应
• 在xs屏幕：两列自动换行，各占一行

初始代码可以正常实现需求，但当右侧列内嵌套一个包含两个子列的row后，右侧列的宽度变成了能容纳两个子列同行的宽度，希望修改后让右侧列按最宽子列的宽度自适应。

初始代码：

<div className='row'>
  <div className='col text-light bg-success'>
    large left column
  </div>
  <div className='col-sm-auto'>
    right column
  </div>
</div>

嵌套子列后的代码：

<div className='row'>
  <div className='col text-light bg-success'>
    large left column
  </div>
  <div className='col-sm-auto'>
    <div className='row row-cols-sm-1'>
      <div className='col text-light bg-secondary'>subcolumn</div>
      <div className='col text-light bg-primary'>subcolumn</div>
    </div>
  </div>
</div>

解决思路与代码修改 #

问题根源在于Bootstrap的row默认是width: 100%的flex容器，即便设置了row-cols-sm-1让子列堆叠，嵌套的row仍会强制撑满父容器的可用宽度，导致右侧列被无意义拉宽。

要实现右侧列按最宽子列自适应，只需做两处修改：

1. 给嵌套的row添加w-auto类，取消100%宽度限制，让它的宽度由内部最宽子列决定
2. 给右侧的col-sm-auto添加align-self-start类，避免它在flex布局中被不必要地拉伸

修改后的完整代码：

<div className='row'>
  <div className='col text-light bg-success'>
    large left column
  </div>
  <div className='col-sm-auto align-self-start'>
    <div className='row row-cols-sm-1 w-auto'>
      <div className='col text-light bg-secondary'>subcolumn</div>
      <div className='col text-light bg-primary'>subcolumn</div>
    </div>
  </div>
</div>

效果说明：

• sm及以上屏幕：右侧列宽度自动适配内部最宽子列，左侧列占据剩余空间
• xs屏幕：右侧列的两个子列平分宽度（row-cols-sm-1仅在sm及以上生效），同时整体右侧列换行到下方，符合布局需求

如果希望xs屏幕下右侧子列也堆叠占满宽度，可将row-cols-sm-1改为row-cols-1，实现全屏幕尺寸下子列堆叠。

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