如何避免窗口缩放时div容器内的元素发生堆叠？

你当前用Bootstrap的col-sm类布局按钮，当窗口宽度小于576px（sm断点默认值）时，列会自动堆叠换行。要避免这种情况，可参考以下几种方案：

方案一：改用自适应所有屏幕的列类 #

把每个按钮外层的col-sm替换成col，Bootstrap中col类会让列在任意屏幕宽度下都保持在同一行，自动均分父容器宽度：

<div class="row">
  <div class="col">
    <button type="button" class="b1 btn btn-danger">+</button>
  </div>
  <!-- 其他按钮列同理修改 -->
</div>

方案二：固定计算器容器最小宽度 #

给最外层的.calbody设置最小宽度，确保窗口缩小到一定程度时，容器宽度不再收缩，按钮自然不会堆叠：

.calbody {
  min-width: 400px; /* 根据按钮总宽度调整数值 */
  width: fit-content; /* 让容器自适应内容宽度 */
  margin: 0 auto; /* 让计算器居中显示 */
}

方案三：强制行内元素不换行 #

利用Bootstrap自带的flex-nowrap类，给.row添加这个类，就能强制行内的列不换行：

<div class="row flex-nowrap">
  <!-- 按钮列保持col-sm或col都可以 -->
</div>

也可以自定义CSS实现：

.row {
  display: flex;
  flex-wrap: nowrap;
}
.col-sm {
  flex: 1; /* 保持各列均分宽度 */
}

修改后的完整代码示例 #

<body>
<div class="calbody" style="min-width: 400px; width: fit-content; margin: 0 auto;">
  <div class="top-body">
    <h1 class="body_name">CALCULATOR</h1>
    <div><input class="screen" type="text" /></div>
  </div>
  <div class="mainbody">
    <div class="container">
      <div class="row flex-nowrap">
        <div class="col">
          <button type="button" class="b1 btn btn-danger">+</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-danger">-</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-danger">x</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-danger">/</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

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