Bootstrap按钮大屏居中但移动端偏移问题求助

问题根源 #

你的问题出在col-2这个类——它在所有屏幕尺寸下都会把容器宽度固定为父元素的1/12。移动端屏幕空间有限，按钮文本"Newest Upload"的宽度超过了这个窄容器的限制，自然会换行；再加上容器本身宽度过小，视觉上就呈现出向左偏移的效果。

修复方案 #

• 用响应式列类替代固定列
  把col-2换成col-md-2，这个类会在中等屏幕（≥768px）时保持1/12的窄宽度，移动端自动切换为100%宽度（默认col-12），按钮能完整显示且始终居中。修改后的HTML代码：

  <div class="d-grid gap-2 col-md-2 mx-auto text-center">
      <button id="Get" class="btn btn-outline-success btn-lg" type="button">Newest Upload</button>
  </div>
  

• 自定义多尺寸适配（可选）
  如果想在小屏幕（比如手机横屏）也保持按钮的紧凑宽度，可以用更细粒度的响应式列类，比如col-sm-4 col-md-2：小屏幕（≥576px）时占父元素1/3宽度，中等及以上屏幕保持1/12宽度，兼顾不同场景的显示效果。

• 强制文本不换行（极端情况优化）
  要是担心极端窄屏（比如小屏手机竖屏）下按钮文本还是会换行，给按钮添加text-nowrap类即可强制文本单行显示：

  <button id="Get" class="btn btn-outline-success btn-lg text-nowrap" type="button">Newest Upload</button>
  

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