求助：Bootstrap row/col无法占满可用宽度的异常问题

核心原因 #

你的布局异常是flex容器子元素的收缩特性导致的：

• 外层<div class="d-flex">是flex容器，其中的ngbNavOutlet容器默认作为flex子元素，自带flex-shrink: 1属性，宽度由内部内容决定，不会自动占满容器剩余空间。
• 你的row内部只有label、button这类行内/行内块元素，没有块级元素（比如p、form）撑满宽度，所以row会跟着父容器（ngbNavOutlet）收缩，设置width:100%也无效——因为父容器本身就没占满可用宽度。

解决步骤 #

1. 让ngbNavOutlet占满flex容器剩余空间

给ngbNavOutlet的div添加flex-grow-1类，强制它填充flex容器的剩余横向空间：

<div [ngbNavOutlet]="nav" class="ms-4 flex-grow-1"></div>

这是最关键的一步，只有父容器拥有足够宽度，内部的Bootstrap栅格才能正常发挥100%宽度的作用。

2. 确保row的父容器是满宽块级元素

如果你的<app-locations>组件根元素不是块级元素，或存在额外宽度限制，给它添加w-100类：

<app-locations class="w-100"></app-locations>

也可以直接在app-locations的根模板容器上添加w-100。

3. 可选：让col内元素撑满宽度（按需）

如果希望col内的按钮、标签也占满列宽，可给它们添加w-100类：

<div class="col-6" style="background-color: orange;">
  <button class="btn btn-outline-secondary w-100">
    Add Address
  </button>
</div>

补充说明 #

你之前发现添加p/form能正常显示，是因为这些是块级元素，默认会占满父容器宽度，间接把col和row的宽度撑起来，但这只是临时的治标方案，解决父容器的flex布局收缩问题才是治本。

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