Sass批量复用CSS类集及Flexbox响应式布局替代方案咨询

云上老周

2026-7-29

解决方案

一、用Sass批量复用Bootstrap类，避免重复编写

你不用在50个元素上重复写row row-cols-1 row-cols-md-2 ml-0，直接用Sass的@extend功能批量继承这些类的样式，只需要在父元素的子选择器上统一处理：

// 让.contact-info下的所有p元素继承目标类的样式
.contact-info p {
  @extend .row, .row-cols-1, .row-cols-md-2, .ml-0;
}

之后你的HTML可以大幅简化，去掉每个p上重复的class：

<div class="mb-4 contact-info">
  <p>
    <span>aaa</span>
    <span>bbb</span>
  </p>
  <p>
    <span>ccc</span>
    <span>ddd</span>
  </p>
  <!-- 剩下的36个p元素直接这么写就行 -->
</div>

@extend会把Bootstrap这些类的样式合并到.contact-info p选择器中，既减少HTML冗余，又保留原有样式效果。

二、Flexbox响应式布局替代方案（更灵活）

如果你觉得Grid的固定px值不够灵活，完全可以用Flexbox实现自适应布局，而且能自定义断点和列宽规则，不用依赖Bootstrap的row-cols类：

自定义Sass代码：

.contact-info p {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0; // 替代.ml-0
  gap: 1rem; // 可选：给子元素加间距，比margin更方便
}

// 移动端：每个span占满一行
.contact-info p span {
  flex: 1 1 100%;
}

// 中等屏幕及以上（和Bootstrap的md断点一致，768px）：每个span占一半宽度
@media (min-width: 768px) {
  .contact-info p span {
    flex: 1 1 calc(50% - 0.5rem); // 用calc减去gap的一半，保证布局不溢出
    // 也可以用百分比或vw单位，比如flex: 1 1 48%; 更灵活
  }
}

对应的简化HTML：

<div class="mb-4 contact-info">
  <p>
    <span>aaa</span>
    <span>bbb</span>
  </p>
  <p>
    <span>ccc</span>
    <span>ddd</span>
  </p>
  <!-- 其余元素同理 -->
</div>

这种方案的优势在于：