如何实现Bootstrap方形按钮的响应式横竖双向缩放？

嘿，我来帮你搞定这个方形按钮的响应式问题！你现在遇到的情况是Bootstrap默认按钮的高度不会随宽度自动调整，所以只能水平缩放。要让它保持方形并双向响应，我们可以通过CSS来控制宽高比，下面给你两种实用方案：

方案一：用现代CSS的aspect-ratio属性（推荐） #

这是最简单的方式，现代浏览器都支持，直接给你的btn-sq类添加宽高比控制：

.btn-sq {
  /* 强制宽高比为1:1，保持方形 */
  aspect-ratio: 1 / 1;
  /* 让按钮内的内容垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：去掉默认按钮内边距，避免影响比例 */
  padding: 0;
}

你的HTML不用改，保持原有结构即可：

<div class="row">
  <div class="col-xs-4">
    <a href="@Url.Action("Axis","Department")" id="axisBtn" class="btn btn-sq btn-info btn-block">Axis</a>
  </div>
  <div class="col-xs-4">
    <a href="@Url.Action("Engine","Department")" class="btn btn-sq btn-info btn-block">Engine</a>
  </div>
</div>

这样调整窗口时，按钮的高度会自动和宽度保持一致，完美实现方形的双向响应。

方案二：兼容旧浏览器的padding百分比技巧 #

如果需要兼容不支持aspect-ratio的老浏览器，可以用基于宽度的百分比padding来实现：

首先修改CSS：

.btn-sq {
  position: relative;
  /* padding-top取100%，让高度等于容器宽度 */
  padding-top: 100%;
  border: none; /* 避免边框影响比例，可根据需求调整 */
}

/* 用绝对定位把按钮内容放在容器里 */
.btn-sq .btn-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 继承原按钮的样式 */
  background-color: #17a2b8;
  color: #fff;
  border-radius: 0.25rem;
}

然后调整HTML结构，把按钮内容放在内部容器中：

<div class="row">
  <div class="col-xs-4">
    <a href="@Url.Action("Axis","Department")" id="axisBtn" class="btn-sq btn-block">
      <span class="btn-content">Axis</span>
    </a>
  </div>
  <div class="col-xs-4">
    <a href="@Url.Action("Engine","Department")" class="btn-sq btn-block">
      <span class="btn-content">Engine</span>
    </a>
  </div>
</div>

这个方法利用了CSS中百分比padding基于父元素宽度计算的特性，同样能让按钮保持方形，适配各种窗口尺寸。

不管用哪种方案，都能让你的按钮在浏览器窗口调整时，横竖方向都能响应式缩放，保持完美的方形~

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