Bootstrap 使用sass将同一组CSS类应用于多个元素

dgsult0t  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(172)

我正在创建一个响应式HTML页面,并且必须将以下类应用于HTML页面中的多个元素(大约50个div)。有没有办法将同一组类应用于多个元素,而不是重复相同的代码50次?我正在使用sass。我想要应用的类是:

class="row row-cols-1 row-cols-md-2 ml-0"

我试过使用网格模板列:重复(自动调整,最小最大(360px,1fr));但是发现使用. px效率很低。有没有其他替代方案来实现响应式设计(也许使用Flexbox)。
编辑:
我的HTML是这样的。

<div class="mb-4 contact-info">
 <p class="row row-cols-1 row-cols-md-2 ml-0">
  <span>aaa</span>
  <span>bbb</span>
 </p>
 <p class="row row-cols-1 row-cols-md-2 ml-0">
  <span>ccc</span>
  <span>ddd</span>
 </p>
 <p class="row row-cols-1 row-cols-md-2 ml-0">
  <span>eee</span>
  <span>fff</span>
 </p>
 <p class="row row-cols-1 row-cols-md-2 ml-0">
  <span>ggg</span>
  <span>hhh</span>
 </p>
</div>
ubbxdtey

ubbxdtey1#

此代码将向表中的每一行添加相同的样式:

table tr {
  @extend .row;
  @extend .row-cols-1;
  @extend .row-cols-md-2;
  @extend .ml-0;
}

这是你要找的吗?

相关问题