使用Bootstrap的col-md-6类布局时中间空隙过大如何解决？

问题原因 #

• 多层嵌套的栅格结构引入了多倍默认间距（gutter），导致元素间空隙过大
• 自定义的.student-blocks设置了固定最大宽度，但未在父容器内居中，导致视觉上右侧空隙异常
• 冗余的嵌套结构也干扰了整体对齐规则

修复方案 #

直接简化栅格结构，用Bootstrap内置工具类实现需求：

1. 移除冗余的嵌套row和col-md-6，直接在单层row内放置4个等宽列，类名设为col-3（占1/4宽度）
2. 给row添加g-1类，将栅格间距调整为极小值（需要完全无间隙就换成g-0）
3. 给每个列添加d-flex justify-content-center类，让内部的.student-blocks自动居中对齐
4. 给.student-blocks添加width:100%保证元素在最大宽度限制下自适应撑满可用空间

完整修正代码 #

<html>
   <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <style>
     .student-blocks {
       padding: 1rem;
       box-shadow: 0 0 10px gray;
       max-width: 9rem;
       text-align: center;
       width: 100%;
     }
   </style>
   <body>
      <section>
         <div class="container">
            <!-- 调整row的间距为最小，加justify-content-center保证整体居中 -->
            <div class="row g-1 justify-content-center">
               <div class="col-3 d-flex justify-content-center">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3 d-flex justify-content-center">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3 d-flex justify-content-center">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
               <div class="col-3 d-flex justify-content-center">
                  <div class="student-blocks">
                     <i class="fas fa-user-graduate"></i><span><small>1000+</small></span>
                     <p>Students</p>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

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