Bootstrap 5中嵌套.container-fluid为何无法占满宽度？

这是因为Bootstrap的.container-fluid并非只设置了width: 100%，它还自带了左右内边距（padding），目的是给容器内容提供统一的留白空间。

当你嵌套两个.container-fluid时：

• 外层绿色容器的padding会把内层红色容器的可用宽度压缩（内层的100%宽度是相对于外层容器去掉padding后的内容区域）
• 内层红色容器自己也有padding，进一步让它的内容区域看起来更窄，视觉上就显得没占满外层容器的总宽度

简单说，Bootstrap的容器类（包括.container和.container-fluid）设计上就不建议嵌套使用，它们的padding是为了和栅格系统配合，保证内容排版的一致性。如果硬要嵌套，内层容器的padding会叠加父容器的padding，导致宽度“缩水”。

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