响应式网站如何在小屏设备上实现两个按钮并排居中显示

解决方案 #

你可以直接修改现有HTML的Bootstrap类实现需求，无需额外编写CSS：

<ul class="app-stores list-unstyled d-flex justify-content-center justify-content-md-start gap-2 mx-auto mx-md-0">
  <li><a href="#"><img class="ios" style="max-width: 130px;" src="img/appstore-apple.svg" alt="app-store"></a></li>
  <li><a href="#"><img class="android" style="max-width: 130px;" src="img/appstore-android.svg" alt="google play"></a></li>
</ul>

相关类/属性说明：

• d-flex 启用弹性布局，默认横向排列子元素，不会自动换行
• justify-content-center 小屏状态下按钮居中对齐
• justify-content-md-start 中等及以上屏幕按钮左对齐，和你原有mx-md-0的布局逻辑保持一致
• gap-2 控制两个按钮之间的间距，可根据设计需求调整为gap-1/gap-3
• 给img添加max-width限制，避免按钮尺寸过大在极小屏设备上被挤换行，数值可自行调整

如果不想修改HTML结构，也可以添加少量自定义CSS实现：

/* 小屏适配 */
.app-stores {
  display: flex !important;
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.app-stores img {
  max-width: 130px;
}
/* 中等屏以上恢复原有样式 */
@media (min-width:768px) {
  .app-stores {
    width: auto;
    justify-content: flex-start;
  }
}

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