CSS 如何设置 bootstrap col-lg-* 类的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25229297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style bootstrap col-lg-* classes?
提问by Majid Golshadi
I'm beginner in Less. I want to write a string like "Column-div" in any divwith col-lg-[anyNumber]or col-md-[anyNumber]class.
我是 Less 的初学者。我想在任何div带有col-lg-[anyNumber]或col-md-[anyNumber]类的地方写一个像“Column-div”这样的字符串。
For example something like this code:
例如像这样的代码：
.col-lg-*:before {
content: "Column-div";
color: #28a4c9;
}
How can I do this with Less?
我怎样才能用 Less 做到这一点？
回答by Harry
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.
选项之一是基本上创建一个 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
With pure CSS:
使用纯 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 Selectorsdepending on your needs. A few samples are available in the snippet.
对于这种模式匹配，还有一个纯 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>