嵌套Bootstrap btn-group制作小键盘样式按钮网格的问题

我需要制作一个类似小键盘的按钮网格，项目基于Angular和Bootstrap 5，想借助btn-group和btn-group-vertical实现。常规按钮网格用这套组件表现正常，但需要让“OK”和“0”按钮尺寸更大。尝试嵌套垂直/水平按钮组后，发现深层嵌套时按钮边框圆角显示异常。想请教：

• btn-group的嵌套仅支持一级吗？
• 如果是，除了用Bootstrap行+列再加大量自定义CSS外，有没有其他方法实现这种小键盘？
• 或者有没有其他方式在现有网格中加入大尺寸的“OK”和“0”按钮？

附上当前实现代码：

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.btn {
  height: 75px;
  min-height: 75px;
}

.zero {
  width: calc(100%*2/3)
}

.decimal {
  width: 33.4%;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="btn-group w-100 keys">
        <div class="btn-group-vertical w-100" role="group" aria-label="Vertical button group">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-secondary w-100">1</button>
            <button type="button" class="btn btn-outline-secondary w-100">2</button>
            <button type="button" class="btn btn-outline-secondary w-100">3</button>
            <button type="button" class="btn btn-outline-secondary w-100"><i class="bi bi-backspace"></i></button>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-secondary w-100">4</button>
            <button type="button" class="btn btn-outline-secondary w-100">5</button>
            <button type="button" class="btn btn-outline-secondary w-100">6</button>
            <button type="button" class="btn btn-outline-secondary w-100">C</button>
          </div>

          <div class="btn-group">
            <div class="btn-group-vertical w-75">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary w-100">7</button>
                <button type="button" class="btn btn-outline-secondary w-100">8</button>
                <button type="button" class="btn btn-outline-secondary w-100">9</button>
              </div>

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary zero">0</button>
                <button type="button" class="btn btn-outline-secondary decimal">,</button>
              </div>

            </div>
            <div class="btn-group-vertical w-25">
              <button type="button" class="btn btn-outline-secondary h-100">OK</button>

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

关于btn-group嵌套限制 #

Bootstrap的btn-group设计上不推荐深层嵌套，它的CSS样式逻辑仅针对一级嵌套场景：默认会移除按钮组内部相邻按钮的边框圆角，让按钮看起来是连续的。但多层嵌套后，CSS选择器无法正确识别深层按钮的位置关系，导致圆角样式冲突，出现多余的圆角。

替代方案（无需大量自定义CSS） #

方案1：网格系统+按钮组结合 #

用Bootstrap的Grid（row/col）布局大尺寸按钮的区域，内部小按钮用btn-group保持样式统一，既可以精确控制按钮尺寸，又避免嵌套问题。

修改后的实现代码：

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.btn {
  height: 75px;
  min-height: 75px;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- 顶部两行按钮用btn-group-vertical -->
      <div class="btn-group-vertical w-100" role="group">
        <div class="btn-group w-100" role="group">
          <button type="button" class="btn btn-outline-secondary">1</button>
          <button type="button" class="btn btn-outline-secondary">2</button>
          <button type="button" class="btn btn-outline-secondary">3</button>
          <button type="button" class="btn btn-outline-secondary"><i class="bi bi-backspace"></i></button>
        </div>
        <div class="btn-group w-100" role="group">
          <button type="button" class="btn btn-outline-secondary">4</button>
          <button type="button" class="btn btn-outline-secondary">5</button>
          <button type="button" class="btn btn-outline-secondary">6</button>
          <button type="button" class="btn btn-outline-secondary">C</button>
        </div>
      </div>
      
      <!-- 底部区域用row布局，拆分7-9和OK、0和小数点 -->
      <div class="row g-0">
        <!-- 左侧75%宽度区域 -->
        <div class="col-9">
          <div class="btn-group-vertical w-100" role="group">
            <div class="btn-group w-100" role="group">
              <button type="button" class="btn btn-outline-secondary">7</button>
              <button type="button" class="btn btn-outline-secondary">8</button>
              <button type="button" class="btn btn-outline-secondary">9</button>
            </div>
            <div class="btn-group w-100" role="group">
              <button type="button" class="btn btn-outline-secondary w-25">0</button>
              <button type="button" class="btn btn-outline-secondary">,</button>
            </div>
          </div>
        </div>
        <!-- 右侧25%宽度区域，OK按钮占满高度 -->
        <div class="col-3">
          <button type="button" class="btn btn-outline-secondary w-100 h-100">OK</button>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：自定义CSS修复嵌套圆角问题 #

如果坚持用btn-group嵌套，只需添加少量CSS强制重置深层按钮的圆角：

/* 修复深层嵌套btn-group的圆角问题 */
.btn-group .btn-group .btn {
  border-radius: 0 !important;
}
/* 给最外层和最内层的按钮添加正确圆角 */
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.btn-group .btn-group > .btn:first-child,
.btn-group .btn-group > .btn:last-child {
  border-radius: var(--bs-btn-border-radius) !important;
}

但这种方式需要手动处理不同层级的圆角，不如方案1简洁易维护。

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