Bootstrap中如何调整Row宽度使其仅占用内容所需的宽度？

问题核心 #

Bootstrap中.row默认样式为display: flex; width: 100%，同时自带左右负边距用于抵消列的默认padding，所以默认会撑满父容器的全部可用宽度，给父容器加阴影后就会出现卡片过宽、内容松散的问题。

解决方案 #

方法1：调整阴影父容器样式（最常用） #

给添加阴影的父元素新增以下Bootstrap内置类即可：

• d-inline-block / w-auto：让容器宽度随内部内容自动适配，不再撑满父级
• px-3：添加左右内边距，抵消.row自带的左右负margin，避免内容溢出阴影边界
• 可选加rounded、p-3类优化卡片圆角、内边距效果

代码示例：

<!-- 带阴影的卡片容器 -->
<div class="shadow-sm rounded p-3 d-inline-block">
  <div class="row g-3">
    <div class="col">示例列1内容</div>
    <div class="col">示例列2内容</div>
    <div class="col">示例列3内容</div>
  </div>
</div>

方法2：直接修改Row本身样式 #

如果不需要额外的父容器，可直接给Row添加样式调整：

• w-auto：取消Row默认的100%宽度
• mx-0：清除Row默认的左右负margin，避免阴影和内容错位
• 可选给Row加shadow-sm、p-2类直接实现阴影效果

代码示例：

<div class="row w-auto mx-0 shadow-sm rounded p-2 g-3">
  <div class="col">示例列1内容</div>
  <div class="col">示例列2内容</div>
  <div class="col">示例列3内容</div>
</div>

额外优化 #

如果需要限制卡片最大宽度避免内容过长时显示异常，可给阴影容器添加Bootstrap内置的最大宽度类，比如max-w-sm、max-w-md等，也可自定义最大宽度属性。

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