Bootstrap中aspect-ratio不生效主因是父容器未形成块级格式化上下文、存在显式height声明或display值不兼容；需确保容器display为block/inline-block/flex/grid，移除min/max-height，并配合box-sizing: border-box与子元素height: 100%。
想实现一个完美的等比例方形容器？直接用 aspect-ratio: 1 / 1 确实是最直观的方案。不过，这里有个前提：你得确保项目使用的 Bootstrap 版本不低于 5.1，并且目标浏览器支持该属性（主流如 Chrome 88+、Firefox 89+、Safari 15.4+）。如果项目需要照顾旧版浏览器，那就得准备好后备方案了，比如经典的 padding-top 技巧，或者用 Ja vaScript 动态计算补位。
为什么 aspect-ratio 在 Bootstrap 中有时不生效
很多开发者都遇到过类似情况：明明写了 aspect-ratio，容器却高度塌陷、内容溢出，甚至完全没反应。问题出在哪？其实，Bootstrap 本身并不会主动干预这个属性。症结往往在于，你的容器被嵌套在了某些特定的布局结构里——比如弹性布局，或者残留的浮动上下文——导致父容器没有形成正常的「块级格式化上下文」，或者被设置了固定的高度值。
- 首先，
aspect-ratio对元素的 display 值有要求，它需要在block、inline-block、flex、grid这类上下文中才能正常工作。像table或者使用了absolute定位并脱离文档流的元素，就可能无法正确计算比例。 - 其次，Bootstrap 的栅格列
.col-*本身是 flex item，这本身没问题。但如果你手动给它的父元素.row加上了display: block，反而会破坏原有的计算上下文。 - 最后，一些自定义的 CSS 重置了
box-sizing，或者设置了min-height: 0，这些细节也常常在无意中干扰比例的计算。
在 .col-md-6 里让子容器严格为正方形
关键不在于“怎么写 aspect-ratio”这句代码，而在于如何确保它不被父级或自身的其他样式声明所覆盖。下面这个组合写法是经过验证的可靠方案：
.square-box {
width: 100%;
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
- 这里有个必须遵守的规则：务必移除容器上所有显式的
height声明，包括min-height和max-height。否则，它们会直接覆盖aspect-ratio的效果。 - 如果容器内部还有图片或文字内容，默认可能会把高度撑开。这时，需要给子元素设置
height: 100%，或者对图片使用object-fit: cover来控制。 - 另外，即使在 Bootstrap 的
.row.g-3（带有间距）布局下使用，gutter 也不会影响aspect-ratio的计算。因为 gutter 是通过.row的负 margin 和.col的 padding 实现的，子容器的宽度计算值仍然是 100%。
兼容性 fallback：不用 JS 怎么保底
当你的项目需要支持 IE11 或老版本的 Safari（这些浏览器不支持 aspect-ratio 属性）时，经典的 padding-top 百分比技巧就成了更可靠的保底选择。这个方案的核心思路是利用 padding 的百分比值相对于父元素宽度计算的特性。
立即学习“前端免费学习笔记（深入）”；
.square-box-fallback {
position: relative;
width: 100%;
}
.square-box-fallback::before {
content: "";
display: block;
padding-top: 100%; /* 高度 = 宽度 × 100% */
}
.square-box-fallback > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 这个方案的优点是兼容性极佳，在所有现代浏览器乃至 IE9+ 上都能正常工作，并且完全不需要依赖 Ja vaScript。
- 需要注意一点：如果容器内的文字需要随容器大小响应式缩放，记得给
font-size使用相对单位（如rem或em），否则文字大小不会自适应。 - 最后，不要将
aspect-ratio和这个后备方案写在同一个选择器里。旧浏览器会忽略整条包含未知属性的规则，而新浏览器则会优先采用aspect-ratio，这可能导致后备样式失效。正确的做法是使用特性查询（@supports）或分开定义。
话说回来，还有一个真正容易被忽略的细节：Bootstrap 框架自身的 .container 和 .row 通常带有预设的 padding 或 margin。这些间距会间接压缩容器的可用宽度，导致你设置的 width: 100% 并不等于视觉上的“填满整个列”。调试时，一个非常实用的技巧是给容器临时加上 outline: 1px solid red，这样就能清晰地看到它的真实边界范围，远比盯着代码文档猜测要有效得多。
