通过 CSS 媒体查询为 .collect 元素在视口宽度 ≤992px 时设置左右各 20px 内边距，确保内容与屏幕边缘保持安全间距，提升小屏设备的可读性与用户体验。

通过 css 媒体查询为 `.collect` 元素在视口宽度 ≤992px 时设置左右各 20px 内边距，确保内容与屏幕边缘保持安全间距，提升小屏设备的可读性与用户体验。

要实现响应式布局中 .collect 容器在小屏幕（如手机、平板）下拥有统一的左右留白，推荐使用标准的 CSS 媒体查询（@media）方案。核心思路是：在视口宽度不超过 992px 时，为 .collect 添加 padding-left: 20px 和 padding-right: 20px，从而避免内容紧贴屏幕边缘，提升视觉舒适度与操作可用性。

以下是推荐的 CSS 实现代码（可直接添加至您的样式表中）：

清新简单网页登录注册页面设计特效

一款清新简单网页登录注册页面设计特效

下载

/* 默认状态（大屏）可不设 padding，或按需定义 */
.collect {
  /* 可选：为大屏设定更宽松的内边距，例如 */
  /* padding: 16px 32px; */
}

/* 响应式断点：992px 及以下 */
@media only screen and (max-width: 992px) {
  .collect {
    padding-left: 20px;
    padding-right: 20px;
  }
}

✅ 注意事项与最佳实践：

• 使用 max-width: 992px 覆盖 Bootstrap 等主流框架的常见断点（如 lg 下界），确保兼容性；
• 若 .collect 的父容器本身有 padding 或 margin，建议检查盒模型行为（推荐启用 box-sizing: border-box）；
• 为保障移动端精准触发，建议在 中添加响应式视口声明：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 如需进一步优化小屏体验，可在此媒体查询内一并调整字体大小、按钮宽度或输入框 width: 100%，防止水平溢出。

该方案简洁、语义清晰、无 JavaScript 依赖，符合现代前端开发的最佳实践。