Bootstrap flex布局计算器按钮无法撑满容器行对齐问题求解

• 仅设置flex-grow无法实现flex子项等宽：flex分配剩余空间时，会先以子项的初始内容宽度为基础，再叠加grow权重分配额外空间。Enter按钮文本更长，初始宽度远大于只有单个字符的+、-按钮，就算grow值相同，最终占用宽度也会更大。
• Bootstrap原生.row类默认带左右负外边距、flex-wrap: wrap属性，没有显式约束子项宽度规则时，按钮尺寸会被内容直接撑开。
• 输入框#entry设置了width: fit-content，就算加了flex-grow:1也会被内容宽度限制，无法撑满首行。
• 输入框HTML标签未闭合，会导致浏览器解析布局时出现异常偏移。

1. 替换原有CSS代码，删除冗余规则：

#entry {
  background-color: white;
  border: solid black 2px;
  margin-bottom: 0.25em;
  /* 移除fit-content，撑满容器宽度 */
  width: 100%;
  box-sizing: border-box;
  padding: 0.375rem 0.75rem;
}

.calc-container {
  width: 20%;
  /* 增加最小宽度，避免窄屏下按钮被挤压变形 */
  min-width: 240px;
}

/* 重写计算器内row的布局规则，覆盖Bootstrap默认样式 */
.calc-container .row {
  background-color: grey;
  display: flex;
  margin: 0;
  flex-wrap: nowrap; /* 强制所有子项不换行，保持单行排列 */
}

/* 统一所有按钮的flex规则，实现完全等宽 */
.calc-container .btn {
  border-radius: 0;
  /* 核心等宽配置：grow=1、shrink=1、基础宽度=0，所有按钮从0宽度开始平均分配空间 */
  flex: 1 1 0;
  white-space: nowrap;
}

注：原有CSS中为.btn-primary、.btn-info单独设置的flex-grow:4规则可以直接删除，上述统一按钮规则已经覆盖等宽需求。

2. 修复HTML结构问题，闭合未写完的输入框标签，调整首行布局：

<div class="row p-2">
  <form name="calc" class="w-100">
    <input type="text" id="entry" readonly>
  </form>
</div>

其余放按钮的行结构不需要改动，保存后刷新即可看到所有按钮等宽撑满容器，Enter按钮不会再因为文本更长挤占其他按钮空间。

flex: 1 1 0是实现flex子项等宽的标准写法：它把所有按钮的初始基准宽度设为0，完全忽略内容本身的宽度差异，容器的全部可用宽度会按flex-grow:1的权重平均分给每个按钮，不管按钮内的文本长度是多少，最终宽度都完全一致。

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