移动端Bootstrap卡片堆叠异常求助：布局问题排查与修复

我创建了三张Bootstrap卡片，在常规视图下显示正常，但在移动端视图中出现堆叠重叠的问题。已正确引入jQuery及Bootstrap的CSS和JS文件，期望实现移动端卡片正常排列的布局，相关代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
    <div class="container col-md-12 ">
        <h1 class="text-center">services</h1>
        <div class="row text-center ">
            <div class="col-md-4 col-4 p-2 position-static "> 
                <div class="card pt-2 bg-info text-white " style="width: 17em;">
                    <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                    <i class="display-1  fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                    <div class="card-body">
                      <h5 class="card-title">Web App Development</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static "> 
              <div class="card pt-2 bg-info text-white " style="width: 17em;">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static"> 
              <div class="card pt-2 bg-info text-white" style="width: 17em;">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>

          </div>
        </div>
    </div>
</section>

造成移动端卡片堆叠重叠的核心原因：

• 卡片设置了固定宽度style="width: 17em;"，在移动端狭窄空间里，该宽度超过col-4分配的列宽，导致卡片溢出重叠。
• col-4在移动端（屏幕宽度<576px）仅占1/3宽度，加上卡片固定宽度，空间不足引发挤压重叠。

修改方法：

1. 移除卡片的固定宽度样式，让卡片自适应父列宽度。
2. 调整移动端列布局：若期望移动端卡片堆叠排列（每行1个），将col-4改为col-12；若仍想每行3个，保留col-4并移除卡片固定宽度即可。

以下是修正后的代码（以移动端堆叠排列为例）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
    <div class="container">
        <h1 class="text-center">services</h1>
        <div class="row text-center">
            <div class="col-md-4 col-12 p-2"> 
                <div class="card pt-2 bg-info text-white">
                    <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                    <div class="card-body">
                      <h5 class="card-title">Web App Development</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12 p-2"> 
              <div class="card pt-2 bg-info text-white">
                  <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  </div>
              </div>
            </div>
            <div class="col-md-4 col-12 p-2"> 
              <div class="card pt-2 bg-info text-white">
                  <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  </div>
              </div>
          </div>
        </div>
    </div>
</section>

同时移除了冗余的col-md-12（容器默认已占100%宽度）和position-static（默认定位为static），让代码更简洁。

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