创建一个带有 4 个带有文本和徽标引导程序的响应式按钮的 div 5

Question

我有一个 HTML/CSS/Bootstrap 5/JS 和 Rust/Actix-web webapp。 代码

在索引页面中，我有一个导航栏和一个中间有四个按钮（垂直、水平）的 div。调整按钮大小的实际机制是获取上面文本的大小并除以 4。这就是按钮的宽度。但是有两个问题：如果用户的名字很小，按钮就会很小，而在中等尺寸的设备上，例如：平板电脑，字体的大小和我的笔记本电脑一样大，因为很难准确配置 @媒体屏幕。

结果，我的按钮溢出了。

.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;
  }
}

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

<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>