Bootstrap移动端按钮行间距调整：如何让按钮布局更整洁？

方法一：使用Bootstrap原生网格系统（推荐） #

利用Bootstrap内置的网格组件实现自动换行与行/列间距，无需自定义CSS，适合新手快速实现需求：

修改后的完整代码：

<?php
include "header.php";
include "navbar.php";
?>

<div class="container mt-4">
  <div class="row justify-content-center g-2">
    <div class="col-auto">
      <button type="button" class="btn btn-info">January</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">February</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">March</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">April</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">May</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">June</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">July</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">August</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">September</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">October</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">November</button>
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-info">December</button>
    </div>
  </div>
</div>

<?php
include "footer.php"
?>

• row justify-content-center：让按钮组水平居中对齐
• g-2：控制按钮之间的间距（行、列方向均生效，可根据需求改为g-1/g-3等）
• col-auto：让按钮自动适配自身宽度，超出容器时自动换行

方法二：自定义CSS媒体查询 #

如果不想调整原有HTML结构，可通过媒体查询仅给移动端按钮添加行间距：

1. 给按钮容器添加类名：

<div class="text-center month-buttons">
  <!-- 原有按钮内容保持不变 -->
</div>

2. 添加自定义样式：

@media (max-width: 767px) {
  .month-buttons .btn {
    margin-bottom: 0.5rem; /* 行间距大小可自行调整 */
  }
  /* 可选：移除最后一行按钮的底部间距，避免容器底部多余空白 */
  .month-buttons .btn:last-child {
    margin-bottom: 0;
  }
}

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