如何设置bootstrap col-lg- *类的样式? [英] How to style bootstrap col-lg-* classes?

问题描述

我是Less的初学者.我想在任何div中使用 col-lg- [anyNumber] 或 col-md- [anyNumber] 类编写类似"Column-div"的字符串. /p>

例如以下代码:

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

如何用Less做到这一点?

解决方案

少用:

一种选择是基本上像下面的代码示例一样创建一个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演示

---

使用纯CSS:

对于这种模式匹配，还有一个纯CSS替代方法.您可以根据需要使用任何 CSS3属性选择器 .摘录中提供了一些示例.

 [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> 

I'm beginner in Less. I want to write a string like "Column-div" in any div with col-lg-[anyNumber] or col-md-[anyNumber] class.

For example something like this code:

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

How can I do this with Less?

解决方案

With Less:

One of the options would be to basically create a Less loop like in the below code sample. However, the problem is that the number is fixed and so it would (a) statically generate as many classes as the number (which means bloated code) and (b) if class has a higher suffix value, it won't be covered.

.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

---

With pure CSS:

There is also a pure CSS alternate for this kind of pattern matching. You can make use of any one of the CSS3 Attribute Selectors depending on your needs. A few samples are available in the snippet.

[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>

这篇关于如何设置bootstrap col-lg- *类的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！