Bootstrap 5 Card中自定义SVG按钮与文本对齐及响应式布局问题

1. 实现响应式列布局（大屏3列，小屏2列） #

原代码固定使用col-4导致所有屏幕都显示3列，改用Bootstrap响应式列类即可实现需求：将每个按钮外层的col-4替换为col-md-4 col-sm-6。其中：

• col-md-4：中等屏幕（≥768px）及以上保持3列布局
• col-sm-6：小屏幕（≥576px且<768px）自动切换为2列布局
• 若需要极小屏幕也保持2列，可替换为col-6 col-md-4

2. 修复按钮下方文本居中 #

给每个按钮的父容器（包含按钮和文本的col-*元素）添加text-center类，即可让按钮和下方文本整体居中对齐；也可以单独给文本所在的<div>添加text-center类。

修改后的完整代码 #

CSS（原样式无需改动）

.quick-link-btn {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #fbeced;
    width: 60px;
    height: 60px;
    fill: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fbeced;
}

.quick-link-btn svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
    color: #e7515a;
}

HTML（关键修改已标注）

<div class="card-body">
  <h5 class="card-title mb-3">Quick Links</h5>
  <!-- 可选：添加g-2增加列间距，优化布局美观度 -->
  <div class="row d-flex justify-content-center mb-5 g-2">
    <!-- 修改col-4为col-md-4 col-sm-6，并添加text-center -->
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Time Clock</div>
    </div>
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 2</div>
    </div>
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 3</div>
    </div>
  </div>
  <div class="row d-flex justify-content-center g-2">
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 1</div>
    </div>
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 2</div>
    </div>
    <div class="col-md-4 col-sm-6 text-center">
      <a class="quick-link-btn" href="javascript:void(0)">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
      </a>
      <div>Button 3</div>
    </div>
  </div>
</div>

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