如何让无法单行容纳的6个Bootstrap列更美观布局？

首先纠正一个小问题：你的代码中多个列使用了相同的id="box"，HTML里id必须唯一，建议改成class或者直接移除重复id。

以下是不用媒体查询就能优化布局的几种方法：

• 调整多断点响应式列宽
  直接用Bootstrap的多断点列类替换col-sm-2，让列在不同屏幕下自动适配每行数量，避免出现仅2个列换行的尴尬情况：

  <div class="row g-2">
    <div class="col-md-2 col-sm-3 col-xs-4 quick_skills_col">
      <div class="quick_skill">
        <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
        <p>python</p>
      </div>
    </div>
    <!-- 其余5个列统一修改类名 -->
  </div>
  

  效果：

  • 中等屏幕（≥768px）：每行6个列
  • 小屏幕（≥576px）：每行4个列
  • 超小屏幕（<576px）：每行3个列

• 让换行后的列居中对齐
  如果不想改变列宽，仅优化换行后的视觉效果，给row添加justify-content-center类，让剩余列在该行居中：

  <div class="row justify-content-center g-2">
    <!-- 保留原有的col-sm-2列 -->
    <div class="col-sm-2 quick_skills_col">
      <div class="quick_skill">
        <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
        <p>python</p>
      </div>
    </div>
    <!-- 其余列 -->
  </div>
  

  搭配g-2（Bootstrap 5）或mx-1调整列间距，布局会更协调。

• 用flex自动适配列宽
  自定义少量CSS，利用flex属性让列根据屏幕宽度自动调整，同时限制最小宽度避免内容挤压：

  .quick_skills_col {
    flex: 1 1 150px; /* 最小宽度150px，空间充足时自动平分宽度 */
    max-width: calc(100% / 6); /* 最多每行显示6个列 */
  }
  

  对应的HTML只需保留基础结构：

  <div class="row g-2">
    <div class="quick_skills_col">
      <div class="quick_skill">
        <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
        <p>python</p>
      </div>
    </div>
    <!-- 其余列 -->
  </div>
  

  这种方式会让列在空间不足时自动换行，且每行数量始终保持合理，不会出现仅2个列单独一行的情况。

• 用row-cols固定每行数量
  Bootstrap的row-cols类可以直接指定不同屏幕下的每行列数，无需手动计算列宽：

  <div class="row row-cols-md-6 row-cols-sm-3 row-cols-xs-2 g-3">
    <div class="quick_skills_col">
      <div class="quick_skill">
        <img class="quick_skill_img" src="{% static 'python_logo.png' %}" alt="python_logo">
        <p>python</p>
      </div>
    </div>
    <!-- 其余列 -->
  </div>
  

  效果：

  • md及以上屏幕：每行6个
  • sm屏幕：每行3个
  • xs屏幕：每行2个

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