我遇到了相同的问题，网格布局在模态框中被压缩。这里有一个快速的解决方法，只需将网格列堆叠在模态框内：

// Stack grid columns when displayed in a modal
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  @for $i from 1 through $grid-columns {
    .modal .col#{$infix}-#{$i} {
      width: 100%;
    }
  }
}

在模态框内添加这个，任何 .col-BP-I 类都会自动扩展到全宽度。虽然有点粗暴，但效果很好。而且甚至不需要容器查询，使其与旧版浏览器兼容(笑)

感谢@goulvench,这是一个不错的解决方法，但并不能完全满足需求。例如，如果我们在其中一个Bootstrap的多个模态尺寸中有一个共享组件：https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes
我还想支持的一个场景是具有可展开或折叠的侧边导航菜单的布局。我希望网格系统基于“主”组件的宽度，而不是整个页面的宽度。

我使用以下补丁(名为patches/bootstrap+5.2.3.patch)解决了我的问题(即我想根据内容容器的大小进行响应式调整):
以下代码不相对于@media设置断点，而是相对于你为该元素添加特定类的元素。
并且有额外的样式：
并且像这样使用：
但是我希望它以某种形式被内置！
编辑：添加了针对body容器的回退。

@Joniras,你在哪里添加了额外的样式？
你能为你修复创建一个仓库或类似的东西吗？
谢谢！

@Schwarcelo
额外的样式必须应用于全局级别。必须在bootstrap scss之前包含，因为scss变量在额外的样式中定义并在(更改后的)bootstrap mixins中使用。

+1支持这个功能。例如，创建卡片或包含大量内容的方块(如标题、副标题、文本、按钮等),字体大小应该根据父元素的宽度进行缩放，而不仅仅是在1-4个响应式列中渲染，仅使用断点就非常混乱。

Bootstrap迫切需要添加这个功能，这是一个基本的需求，列应该基于它们所在的容器而不是设备宽度。iFrames、模态框，甚至只是在页面中添加一个侧边栏都会破坏所有的Bootstrap响应式类。

### 请尽快添加这个功能！!!!!!!!!!!!!!!!!!!!!!

我已经将这个添加到了我的scss中，暂时这样：

.cq {
    display: flex;
    flex-wrap: wrap;
    container-type: inline-size;

    & > * {
        flex: 0 0 auto;
        width: 100cqw;
    }
}

@each $infix, $breakpoint in $grid-breakpoints {
    @container (min-width: #{$breakpoint}) {
        .cq-#{$infix}-1 {
            width: 8.33333333cqw;
        }

        .cq-#{$infix}-2 {
            width: 16.66666667cqw;
        }

        .cq-#{$infix}-3 {
            width: 25cqw;
        }

        .cq-#{$infix}-4 {
            width: 33.33333333cqw;
        }

        .cq-#{$infix}-5 {
            width: 41.66666667cqw;
        }

        .cq-#{$infix}-6 {
            width: 50cqw;
        }

        .cq-#{$infix}-7 {
            width: 58.33333333cqw;
        }

        .cq-#{$infix}-8 {
            width: 66.66666667cqw;
        }

        .cq-#{$infix}-9 {
            width: 75cqw;
        }

        .cq-#{$infix}-10 {
            width: 83.33333333cqw;
        }

        .cq-#{$infix}-11 {
            width: 91.66666667cqw;
        }

        .cq-#{$infix}-12 {
            width: 100cqw;
        }
    }
}

所以你可以像这样使用它：row/col:

<div class="cq">
    <div class="cq-sm-6 cq-lg-4">Hello</div>
    <div class="cq-sm-6 cq-lg-4">Hello</div>
    <div class="cq-sm-6 cq-lg-4">Hello</div>
</div>

我已经开始了一个新的仓库，尝试以引导方式实现容器查询，但它仍然在进行中：
https://github.com/bastienmoulia/bootstrap-container-queries
PR欢迎您！