Bootstrap中设置所有卡片宽度一致的方法（表格导致超宽）

核心原因 #

带表格的卡片被内部表格内容撑宽，打破了原本的布局约束，导致和其他卡片宽度不一致。以下是具体修复步骤：

步骤1：修正网格布局的错误 关键前提 #

你当前用了col-md-15，但Bootstrap的网格系统默认是12列，col-md-15属于无效类，会导致列宽度计算异常。先把所有col-md-15改成col-md-12，确保所有卡片所在的列宽度统一。

步骤2：让表格自适应容器，不撑爆卡片 #

给表格外面套一个Bootstrap自带的table-responsive容器，这样表格在小屏幕上会自动出现横向滚动条，不会撑大卡片。同时给所有卡片添加width: 100%;的样式约束，确保宽度一致。

修改后的完整代码示例 #

<main role="main" class="container">
<div class="container">
  <div class="main-body">

          <div class="row gutters-sm">
            <div class="col-md-12"> <!-- 修正为col-md-12 -->
              <div class="card mb-3" style="width: 100%;"> <!-- 添加宽度约束 -->
                <div class="card-body">
                <!-- stuff here--> 
                </div>
              </div>
            </div>
          </div>

          <div class="row gutters-sm">
            <div class="col-md-12"> <!-- 修正为col-md-12 -->
              <div class="card mb-3" style="width: 100%;"> <!-- 添加宽度约束 -->
                <div class="card-body">                  
                <!-- stuff here-->                   
                </div> <!--end of card-->
              </div>
            </div>
          </div>
          <div class="row gutters-sm">
            <div class="col-md-12"> <!-- 修正为col-md-12 -->
              <div class="card mb-3" style="width: 100%;"> <!-- 添加宽度约束 -->
                <div class="card-body">
                <!-- 用table-responsive包裹表格 -->
                <div class="table-responsive">
               <table class="table mb-0 table-hover">
                 <thead class="bg-primary">
                   <tr>
                     <th scope="col">SSSSSS</th>
                     <th scope="col">DDDDDD</th>
                     <th scope="col">FFFFFF</th>
                     <th scope="col">TTTTTT</th>
                     <th scope="col">GGGGGGGGG</th>
                     
                     <th scope="col">AAAAAA</th>
                     
                   </tr>
                 </thead>
                 <tbody>
                  
                   <tr>
                   <td class="mb-0"><div class="col-md-1 text-secondary">String 1 </div></td>
                   <td class="mb-0"><div class="col-md-1 text-secondary">String 2 </div></td>
                   <td class="mb-0"><div class="col-md-1 text-secondary">String 3</div></td>
                   <td class="mb-0"><div class="col-md-1 text-secondary">String 4</div></td>
                   <td class="mb-0"><div class="col-md-1 text-secondary">TTTT    </div></td>
                   
                   <td class="mb-0">
                                   <div class="col-sm-12">
                                   <a class="btn btn-secondary " name="education" href="/edit/2">Edit</a>
                                   <a class="btn btn-danger    " name="education" href="/delete/2">Delete</a>
                                   </div>
                   </td>
                   
                   </tr>
                 </tbody>
               </table>
                </div> <!-- 结束table-responsive -->
                <!-- stuff here-->                                     
                </div> <!--end of card body-->
              </div>
            </div>
          </div>

  </div>
</div>
</main>

额外优化（可选） #

如果不想出现横向滚动条，可以给表格单元格添加自动换行样式：

.table td, .table th {
  white-space: normal;
  word-wrap: break-word;
}

这样超长内容会自动换行，表格不会撑宽卡片。

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