如何实现不同屏幕下动态Bootstrap网格元素的差异化对齐

完全不需要修改原有动态渲染的HTML逻辑，删掉原来基于$index的类绑定代码，通过CSS伪类搭配媒体查询就能实现全部对齐规则，耦合度更低、维护更简单。

规则实现逻辑 #

1. 小屏幕默认状态：所有.el-container设置justify-content: center，直接满足小屏幕下全元素居中的要求。
2. 中等屏幕（md尺寸，每行排布2列）：
   • 每行第2个元素本身就继承默认的居中对齐，符合要求
   • 仅需给每行第1个元素设置靠左对齐即可
3. 大屏幕（lg尺寸，每行排布3列）：
   • 每行第1个元素：靠容器起始端对齐
   • 每行第2个元素：居中对齐
   • 每行第3个元素：靠容器末端对齐

代码调整步骤 #

第一步：删除冗余逻辑 #

• 移除HTML中多余的动态类绑定：删掉ng-class="{'align-middle': $index%3 === 1, 'align-end': $index%3 === 2}"
• 删掉原来手动定义的.align-middle、.align-end类

第二步：替换为纯CSS实现代码 #

.list-container {
  min-height: 100px;
}
.el-row-container {
  width: 95%;
}
.el-row-container .el-container {
  width: 410px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  /* 小屏幕默认全元素居中 */
  justify-content: center;
}
.data {
  position: relative;
  min-width: 291px;
  height: 36px;
  display: inline-block;
  padding: 10px 11px;
  border-radius: 4px;
  font-weight: 400;
  letter-spacing: 0.15px;
  font-size: 14px;
  line-height: 16px;
  background: rgba(0, 0, 0, 0.6);
}
/* 中等屏幕：每行2列，第1个元素靠左 */
@media (min-width: $breakpoint-md) {
  .el-container:nth-child(2n+1) {
    justify-content: flex-start;
  }
}
/* 大屏幕：每行3列，逐位置调整对齐 */
@media (min-width: $breakpoint-lg) {
  /* 每行第1个元素：靠左 */
  .el-container:nth-child(3n+1) {
    justify-content: flex-start;
  }
  /* 每行第2个元素：居中 */
  .el-container:nth-child(3n+2) {
    justify-content: center;
  }
  /* 每行第3个元素：靠右 */
  .el-container:nth-child(3n) {
    justify-content: flex-end;
  }
}

方案对比原有实现的优势 #

• 彻底移除了模板中的索引计算逻辑，动态渲染时不需要额外生成类名，和业务渲染逻辑完全解耦
• 所有对齐规则由CSS统一管理，后续调整断点、对齐方式只需要修改CSS代码，不需要改动业务逻辑层
• 完全兼容现有col-md-2、col-lg-3的栅格配置，不需要调整原有栅格类的样式

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