如何用Bootstrap实现组件响应式布局及输入框折叠功能？

一、响应式布局实现 #

直接用Bootstrap的网格和排序类就能搞定需求：

• 大屏（≥768px）：Todo List和New Todo各占50%宽度，左列放Todo List，右列放New Todo
• 小屏（<768px）：New Todo自动顶到最上面，Todo List在下方

核心HTML结构：

<div class="container">
  <div class="row">
    <!-- Todo List 组件 -->
    <div class="col-md-6 order-2 order-md-1">
      <h3>Todo List</h3>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>任务</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>完成Bootstrap布局</td>
            <td>已完成</td>
          </tr>
          <!-- 更多任务行 -->
        </tbody>
      </table>
    </div>

    <!-- New Todo 组件 -->
    <div class="col-md-6 order-1 order-md-2">
      <!-- 小屏折叠按钮（大屏自动隐藏） -->
      <button class="btn btn-primary d-md-none mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#newTodoCollapse" aria-expanded="false" aria-controls="newTodoCollapse">
        新增待办
      </button>
      <!-- 折叠容器 -->
      <div class="collapse d-md-block" id="newTodoCollapse">
        <h3>New Todo</h3>
        <form>
          <div class="mb-3">
            <label for="todoContent" class="form-label">任务内容</label>
            <input type="text" class="form-control" id="todoContent" placeholder="输入要做的事">
          </div>
          <button type="submit" class="btn btn-success">添加任务</button>
        </form>
      </div>
    </div>
  </div>
</div>

关键类说明：

• col-md-6：大屏时每个组件占6列（刚好一半宽度），小屏自动铺满整行
• order-1/order-2：小屏下的显示顺序，order-1优先级更高，所以New Todo排在前面
• order-md-1/order-md-2：大屏下的显示顺序，把Todo List设为order-md-1，就能固定在左边

二、小屏折叠功能实现 #

用Bootstrap自带的Collapse组件就能实现，不用额外写JS：

1. 加个仅小屏显示的触发按钮，用d-md-none类让它在大屏自动隐藏
2. 把New Todo的表单放进collapse容器，同时给容器加d-md-block：大屏下默认展开，小屏下默认折叠
3. 按钮通过data-bs-toggle="collapse"和data-bs-target="#newTodoCollapse"绑定折叠容器，点击就能切换展开/收起状态

如果用的是Bootstrap 4版本，把data-bs-前缀换成data-就行，其他类名通用。

内容的提问来源于stack exchange，提问作者Johan Cowé