如何基于屏幕尺寸调整Bootstrap表格行列的显示方式？

你当前用<table>加多<tbody>的结构是天然纵向排版，所以桌面端没法实现横向成行的效果。要达成期望布局，建议改用Bootstrap的栅格系统重构结构，既能保留移动端堆叠的良好效果，又能让桌面端自动横向排列内容。

重构后代码示例 #

<div class="row justify-content-center pt-5 mt-5 mb-5 pb-5 g-4">
  <!-- 红饮分类 -->
  <div class="col-md-4 col-sm-12">
    <h5 class="mb-3">Red</h5>
    <div class="drink-item mb-2">
      <span>饮品名称1</span>
      <span class="float-end">¥XX</span>
    </div>
    <div class="drink-item mb-2">
      <span>饮品名称2</span>
      <span class="float-end">¥XX</span>
    </div>
    <!-- 更多红饮项 -->
  </div>

  <!-- 白饮分类 -->
  <div class="col-md-4 col-sm-12">
    <h5 class="mb-3">White</h5>
    <div class="drink-item mb-2">
      <span>饮品名称1</span>
      <span class="float-end">¥XX</span>
    </div>
    <div class="drink-item mb-2">
      <span>饮品名称2</span>
      <span class="float-end">¥XX</span>
    </div>
    <!-- 更多白饮项 -->
  </div>

  <!-- 可按需添加更多分类列 -->
</div>

关键说明 #

• col-md-4 col-sm-12：设置移动端（屏幕宽度<768px）时每个分类占满整行，桌面端（≥768px）时每行显示3个分类列，可根据需求调整col-md-*的数值（比如col-md-3就是每行4列）
• g-4：给列之间添加统一间距，替代自定义margin/padding，符合Bootstrap的间距规范
• 用<div>替代<table>承载饮品项，更灵活适配响应式布局，价格靠右可使用float-end（Bootstrap 5）或pull-right（Bootstrap 4）

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