Bootstrap 5响应式按钮适配问题求助：尺寸异常与内容溢出

问题背景 #

我有一个基于HTML/CSS/Bootstrap 5/JS和Rust/Actix-web的Web应用，首页包含导航栏和一个垂直、水平居中的4个按钮容器。当前通过JS获取上方标题文本宽度并除以4来设置按钮宽度，但存在两个问题：

• 当用户名过短时，按钮宽度会过小；
• 平板等中等尺寸设备上字体大小与电脑端一致，难以通过@media精确适配，导致按钮内容溢出。

原代码 #

JavaScript #

let divElement = document.getElementById("welcome");
let buttons = document.getElementsByClassName('button-group-element')
let buttons_array = Array.from(buttons)
let elemWidth = divElement.offsetWidth / buttons_array.length;
for (i = 0; i < buttons_array.length; i++) {
  if (i != 0) {
    buttons_array[i].style.marginLeft = elemWidth * i + "px"
  }
  buttons_array[i].style.width = elemWidth + "px"
}

CSS #

html,
body {
 position: relative;
 height: 100%;
 width: 100%;
}

body {
 display: flex;
 position: absolute;
 align-items: center;
 bottom: 40%;
 justify-content: center;
 background-color: #0000;
}

#welcome {
 text-align: center;
 }


.button-group-element {
  text-align: center;
  position: absolute;
  height: 40%;
}

@media screen and (min-width: 707px) {
  .button-group-element {
    font-size: 2em;
  }
}

@media screen and (max-width: 706px) {
  .button-group-element {
    font-size: 1.3em;
  }
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<h1 id="welcome">Bienvenido John Doe!</h1>
<div class="button-group">
<button onclick="window.location.href='/add_question'" type="button" class="btn btn-outline-primary button-group-element"><i class="bi bi-plus-circle"></i> <br>Nueva Pregunta</button><button type="button" class="btn btn-outline-primary button-group-element"
  onclick="window.location = '/modify_question'"><i class="bi bi-pen"></i> <br>Modificar Pregunta</button><button type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/student_question'"><i class="bi bi-mortarboard"></i> <br>Preguntas de los Alumnos</button>
<button
  type="button" class="btn btn-outline-primary button-group-element" onclick="window.location = '/statics'"><i class="bi bi-bar-chart"></i> <br>Estadistica</button> </div>

解决方案 #

核心思路是利用Bootstrap的栅格系统和CSS响应式特性替代JS计算，实现按钮的自适应布局，同时优化字体的响应式缩放。

修改后的HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<div class="container h-100 d-flex flex-column justify-content-center align-items-center">
  <h1 id="welcome" class="mb-5">Bienvenido John Doe!</h1>
  <div class="row w-100 g-3">
    <div class="col-12 col-sm-6 col-md-3">
      <button onclick="window.location.href='/add_question'" type="button" class="btn btn-outline-primary w-100 h-100 button-group-element">
        <i class="bi bi-plus-circle"></i> <br>Nueva Pregunta
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <button type="button" class="btn btn-outline-primary w-100 h-100 button-group-element" onclick="window.location = '/modify_question'">
        <i class="bi bi-pen"></i> <br>Modificar Pregunta
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <button type="button" class="btn btn-outline-primary w-100 h-100 button-group-element" onclick="window.location = '/student_question'">
        <i class="bi bi-mortarboard"></i> <br>Preguntas de los Alumnos
      </button>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <button type="button" class="btn btn-outline-primary w-100 h-100 button-group-element" onclick="window.location = '/statics'">
        <i class="bi bi-bar-chart"></i> <br>Estadistica
      </button>
    </div>
  </div>
</div>

修改后的CSS #

html,
body {
  height: 100%;
  width: 100%;
}

.button-group-element {
  text-align: center;
  /* 使用clamp实现平滑的响应式字体缩放 */
  font-size: clamp(1.2em, 3vw, 2em);
  padding: 1rem;
}

#welcome {
  text-align: center;
  font-size: clamp(1.8em, 4vw, 3em);
}

修改说明 #

1. 移除JS计算逻辑：改用Bootstrap栅格系统（row+col-*）自动分配按钮宽度，无论标题文本长短，按钮都会根据屏幕尺寸自适应，避免按钮过小的问题；
2. 响应式字体优化：使用clamp()函数设置字体大小，根据屏幕宽度动态调整，替代生硬的断点媒体查询，适配从手机到桌面的所有设备，防止内容溢出；
3. 布局结构优化：用Bootstrap的d-flex、justify-content-center、align-items-center实现页面内容的垂直水平居中，移除原有的绝对定位，避免布局冲突；
4. 添加间距：通过g-3设置按钮间的间距，mb-5设置标题与按钮组的间距，提升视觉体验。

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