移动端（iPhone SE）购物车Input Group适配问题求助

我正在制作购物车页面，常规屏幕显示正常，但在iPhone SE这类小屏幕设备上，数量选择的Input Group布局错乱。尝试添加append属性后问题仍未解决，相关代码如下：

<ion-view>
  <ion-content>
    <h1 class="text-center">Cart</h1>
    <div class="container">
      <div class="row text-center">
        <div class="col-6">Tất cả</div>
        <div class="col-6">Đã mua</div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 input-group text-center">
          <input type="checkbox" class="form-check-input margin-auto" />
        </div>
        <div class="col-3 text-center">
          <img
            src="scripts\cart\placeholder.png"
            class="img-fluid"
            style="height: fit-content; width: fit-content"
            alt=""
          />
        </div>
        <div class="col-7">
          <div class="row">
            <div class="col-8">
              <div class="row">
                <p>Tên dòng xe</p>
              </div>
              <div class="row">
                <p>Phân loại: Màu sắc</p>
              </div>
              <label for="price" class="">Giá tiền</label>
              <div class="row">
                <div
                  class="input-group-append mw-50"
                  style="width: 20px; height: max-content"
                >
                  <button class="btn btn-primary">-</button>
                  <input
                    type="text"
                    class="form-control text-center"
                    placeholder="1"
                  />
                  <button class="btn btn-primary">+</button>
                  <span class="input-group-text">81 sản phẩm có sẵn</span>
                </div>
              </div>
            </div>
            <div class="col-4">
              <img src="scripts\cart\trashbin.png" width="50" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

问题分析 #

原代码中导致布局错乱的核心原因：

• 给input-group-append设置了固定的width:20px，直接挤压内部按钮、输入框和文本的空间
• Input Group结构不符合规范，错误地用input-group-append作为顶层容器，而非标准的input-group
• 小屏幕下col-8空间有限，未做响应式适配，导致内部元素拥挤溢出

修改后的代码 #

<ion-view>
  <ion-content>
    <h1 class="text-center">Cart</h1>
    <div class="container">
      <div class="row text-center">
        <div class="col-6">Tất cả</div>
        <div class="col-6">Đã mua</div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 input-group text-center">
          <input type="checkbox" class="form-check-input margin-auto" />
        </div>
        <div class="col-3 text-center">
          <img
            src="scripts/cart/placeholder.png"
            class="img-fluid"
            style="height: fit-content; width: fit-content"
            alt=""
          />
        </div>
        <div class="col-7">
          <div class="row">
            <div class="col-12 col-sm-8">
              <div class="row">
                <p>Tên dòng xe</p>
              </div>
              <div class="row">
                <p>Phân loại: Màu sắc</p>
              </div>
              <label for="price">Giá tiền</label>
              <div class="row align-items-center">
                <!-- 修正Input Group结构 -->
                <div class="input-group flex-nowrap flex-sm-wrap">
                  <div class="input-group-prepend">
                    <button class="btn btn-primary btn-sm">-</button>
                  </div>
                  <input
                    type="text"
                    class="form-control text-center"
                    placeholder="1"
                    style="max-width: 60px;"
                  />
                  <div class="input-group-append">
                    <button class="btn btn-primary btn-sm">+</button>
                  </div>
                  <!-- 库存文本小屏幕下换行显示 -->
                  <span class="input-group-text d-block w-100 mt-2 text-sm-left text-center" style="font-size: 0.8rem;">81 sản phẩm có sẵn</span>
                </div>
              </div>
            </div>
            <div class="col-12 col-sm-4 text-sm-right text-center mt-2 mt-sm-0">
              <img src="scripts/cart/trashbin.png" width="40" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

关键调整说明 #

• 移除固定宽度限制：删掉input-group-append上的width:20px内联样式，让元素根据内容自适应空间
• 修正组件结构：使用标准input-group作为容器，增减按钮分别放入input-group-prepend和input-group-append，符合组件规范
• 响应式布局优化：
  • 商品信息列改为col-12 col-sm-8，小屏幕下占满整行，避免空间不足
  • 垃圾桶图标列改为col-12 col-sm-4，小屏幕下居中显示并添加间距
• 元素尺寸适配：
  • 增减按钮添加btn-sm类缩小尺寸
  • 数量输入框设置max-width:60px限制宽度
  • 库存文本缩小字体并设置小屏幕下换行显示
• Flex布局优化：给input-group添加flex-nowrap flex-sm-wrap，小屏幕下允许元素换行，避免横向溢出

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