Bootstrap 4小屏模式下列转行布局实现需求问询

嘿，我完全get你的需求：中等及以上屏幕保持4列4行的计算器布局（左侧3个数字按钮+右侧1个操作符按钮为一行），小屏时把右侧的操作符列整体移到数字按钮区域下方，变成第5到第8行。用Bootstrap 4的原生工具类就能轻松搞定，不用额外写原生CSS，代码还更简洁。

核心思路拆解 #

• 利用Bootstrap的响应式网格类控制不同屏幕下的区域宽度
• 结合flex布局工具类让操作符按钮在中等屏时垂直填满高度，和左侧数字按钮对齐
• 外层容器用flex-md-row flex-column，实现中等屏横向排列、小屏纵向排列的切换

调整后的完整代码 #

<div class="container">
  <div class="row flex-md-row flex-column">
    <!-- 数字按钮区域：中等屏占8列，小屏占满整行 -->
    <div class="col-md-8 col-12">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">1</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">2</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">3</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">4</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">5</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">6</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">7</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">8</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">9</button>
        <button type="button" class="btn-lg btn-outline-light col-4 col-md-4">&plusmn;</button>
        <button type="button" class="btn-lg btn-outline-dark col-4 col-md-4">0</button>
        <button type="button" class="btn-lg btn-outline-light col-4 col-md-4">.</button>
      </div>
    </div>
    <!-- 操作符按钮区域：中等屏占4列，小屏占满整行 -->
    <div class="col-md-4 col-12">
      <div class="row flex-column h-100">
        <button type="button" class="btn-lg btn-outline-dark flex-fill">X</button>
        <button type="button" class="btn-lg btn-outline-dark flex-fill">-</button>
        <button type="button" class="btn-lg btn-outline-dark flex-fill">+</button>
        <button type="button" class="btn-lg btn-outline-dark flex-fill">=</button>
      </div>
    </div>
  </div>
</div>

效果验证 #

• 中等及以上屏幕（≥768px）：数字区域占8列，内部按钮每行3个（col-md-4刚好填满父容器）；操作符区域占4列，用flex-column和flex-fill让4个按钮垂直填满整列高度，和左侧4行数字按钮完美对齐，视觉上就是4列4行的布局。
• 小屏（<768px）：数字区域和操作符区域都占满整行，外层flex-column让操作符区域自动排在数字区域下方，每个操作符按钮单独占一行，完全符合你要的「第4列转为第5行」的需求。

另外，你提到已有几位开发者给出了可行方案，选最佳答案确实挺纠结的，不过这个方案用的都是Bootstrap最常用的工具类，代码简洁易维护，完全适配你的需求。

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