如何设置引导 col-lg-* 类的样式？

Posted 2023-03-06

【中文标题】如何设置引导 col-lg-* 类的样式？

【英文标题】：How to style bootstrap col-lg-* classes?

【发布时间】：2014-10-03 10:57:03

【问题描述】：

我是 Less 的初学者。我想用 col-lg-[anyNumber] 或 col-md-[anyNumber] 类在任何div 中写一个类似“Column-div”的字符串。

例如这样的代码：

.col-lg-*:before 
  content: "Column-div";
  color: #28a4c9;

如何用 Less 做到这一点？

【问题讨论】：

您是否正在寻找类似demo 的循环？单击 CSS 选项卡中的眼睛图标以查看编译后的 CSS 输出。

@Harry，谢谢哈利！这是我的答案

您可能还想看一下 this thread 中 7-phases-max 提供的 for 循环包装器 mixin。 LESS 本身没有for 语法，但这个包装器非常有用且易于使用:)（注意：我删除了前面的评论以减少噪音，请不要弄错）。

【参考方案1】：

少用：

其中一个选项是基本上创建一个 Less 循环，如下面的代码示例所示。但是，问题在于数字是固定的，因此它会（a）静态生成与数字一样多的类（这意味着臃肿的代码）和（b）如果类具有更高的后缀值，则不会被覆盖。

.loop(@count) when (@count > 0) // execute the function only when condition matches.
  .loop(@count - 1); // call the iteration again with a decremented count
  .col-lg-@count:before  // using selector interpolation to add the count number
    content: "Column-div";
    color: #28a4c9;
    


.loop(100); // call the loop with the no. of iterations as the parameter

Codepen Demo

---

使用纯 CSS：

对于这种模式匹配，还有一个纯 CSS 替代方案。您可以根据需要使用CSS3 Attribute Selectors 中的任何一个。 sn-p 中提供了一些示例。

[class^='col-lg']:before  /* class name starts with col-lg */
  content: "Column-div";
  color: yellow;

[class$='col-lg']:before  /* class name ends with col-lg */
  content: "Column-div2";
  color: beige;

[class*='col-lg']:before  /* contains col-lg in class name */
  background: chocolate;


/* Just for demo */

div:before
  display: block;

<div class='col-lg-1'></div>
<div class='col-lg-2'></div>
<div class='col-lg-3'></div>

<div class='a-col-lg'></div>
<div class='b-col-lg'></div>
<div class='c-col-lg'></div>