zyuas.com/src/assets/css/layout-spacing.css

/**
 * 全局布局边距系统
 * Global Layout Spacing System
 * 
 * 统一的左右边距规范，确保所有页面排版整齐美观
 * 适用于桌面端（Desktop），移动端保持原有样式
 */

/* ===== CSS 变量定义 ===== */
:root {
  /* 容器最大宽度 */
  --container-max-width: 1200px;
  
  /* 桌面端左右边距 */
  --desktop-padding-x: 40px;
  
  /* 平板端左右边距 */
  --tablet-padding-x: 20px;
  
  /* 移动端左右边距（如需要） */
  --mobile-padding-x: 15px;
  
  /* 区块垂直间距 */
  --section-spacing-y: 80px;
  
  /* 小区块垂直间距 */
  --subsection-spacing-y: 40px;
}

/* ===== 通用容器类 ===== */

/* 主容器 - 限制最大宽度并居中 */
.l-container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--desktop-padding-x);
  padding-right: var(--desktop-padding-x);
  box-sizing: border-box;
}

/* 全宽容器 - 仅应用左右内边距 */
.l-container-fluid {
  padding-left: var(--desktop-padding-x);
  padding-right: var(--desktop-padding-x);
  box-sizing: border-box;
}

/* 无左右内边距的容器 */
.l-container-none {
  padding-left: 0;
  padding-right: 0;
}

/* ===== 响应式断点 ===== */

/* 平板端 (768px - 1199px) */
@media (max-width: 1199px) {
  :root {
    --desktop-padding-x: 20px;
  }
  
  .l-container {
    padding-left: var(--tablet-padding-x);
    padding-right: var(--tablet-padding-x);
  }
  
  .l-container-fluid {
    padding-left: var(--tablet-padding-x);
    padding-right: var(--tablet-padding-x);
  }
}

/* 移动端 (< 768px) - 保持原有 Bootstrap 样式 */
@media (max-width: 767px) {
  :root {
    --desktop-padding-x: var(--mobile-padding-x);
    --tablet-padding-x: var(--mobile-padding-x);
  }
}

/* ===== 区块间距 ===== */

/* 大区块间距 (80px) */
.l-section {
  padding-top: var(--section-spacing-y);
  padding-bottom: var(--section-spacing-y);
}

/* 小区块间距 (40px) */
.l-subsection {
  padding-top: var(--subsection-spacing-y);
  padding-bottom: var(--subsection-spacing-y);
}

/* 顶部无间距 */
.l-section--no-top {
  padding-top: 0;
}

/* 底部无间距 */
.l-section--no-bottom {
  padding-bottom: 0;
}

/* ===== 内容对齐工具类 ===== */

/* 文本内容最大宽度 */
.l-content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 居中对齐 */
.l-align-center {
  text-align: center;
}

/* 两端对齐 */
.l-align-justify {
  text-align: justify;
}

/* ===== 网格系统间距 ===== */

/* 行间距 */
.l-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* 列间距 */
.l-col {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* ===== 特殊场景 ===== */

/* Banner/轮播图全宽 */
.l-banner {
  padding-left: 0;
  padding-right: 0;
}

/* 导航栏边距 */
.l-navbar {
  padding-left: var(--desktop-padding-x);
  padding-right: var(--desktop-padding-x);
}

/* Footer 边距 */
.l-footer {
  padding-left: var(--desktop-padding-x);
  padding-right: var(--desktop-padding-x);
}

/* ===== 打印样式 ===== */
@media print {
  .l-container,
  .l-container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}