移动端bootstrap订单列表显示

### 使用 Bootstrap 创建移动设备上的订单列表布局

为了确保在移动设备上提供良好的用户体验，可以利用 Bootstrap 的栅格系统来构建响应式的订单列表布局。由于 Bootstrap 是移动优先的设计框架，在较小屏幕上默认采用单列布局。

对于订单列表而言，通常每一项都包含多个部分的信息，比如商品图片、名称、价格以及操作按钮等。通过合理设置类名可以让这些组件按照预期排列：

- 利用 `container` 或者 `container-fluid` 来定义容器宽度[^1]。
- 运用 `.row` 和 `.col-*` 类组合创建弹性网格结构，其中 * 可以为 sm, md, lg, xl 表示不同断点下的列数或比例。

下面是一个简单的 HTML 结构实例展示如何应用上述原则制作一个适合手机查看的订单详情页片段：

<div class="container">
  <div class="row mb-3">
    <!-- 订单标题 -->
    <div class="col text-center">
      <h2>我的订单</h2>
    </div>
  </div>

  <!-- 单个订单条目开始 -->
  {% for order in orders %}
  <div class="card mb-4 shadow-sm">
    <div class="card-body row g-0">

      <!-- 商品缩略图 -->
      <img src="{{order.product_image}}" alt="Product Image" class="col-3 img-thumbnail"/>

      <!-- 主要信息区域 -->
      <div class="col ms-3 d-flex flex-column justify-content-between">
        <ul class="list-unstyled m-0">
          <li><strong>{{order.name}}</strong></li>
          <li>数量: {{order.quantity}}</li>
          <li>单价: ¥{{order.price}}</li>
        </ul>

        <!-- 底部的操作链接/按钮 -->
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
      
    </div>
  </div>
  <!-- 单个订单条目结束 -->

  {% endfor %}
</div>

这段代码展示了基本的商品卡片样式，当屏幕较小时（如智能手机），图像和文字描述会垂直堆叠；而当屏幕变大时，则水平并排显示。此外还加入了间距调整(`mb-`)使各元素之间保持适当距离，并且使用了居中的文本对齐方式提升美观度。