Question

我想在css中定义自定义类，并将它们用于HTML中的组件，而不是如下所示。 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

我想在css中定义类似下面的内容并在HTML中使用它

.fullwidth{
width : "col-lg-12 col-md-12 col-sm-12 col-xs-12";}

HTML： <div class="fullwidth">

请帮忙。另请分享任何可用的示例链接

Answer 1

每个盒子级元素（div，p ...）将被拉伸100％的容器。不需要自定义类。如果element是内联级元素 - 只需添加display：block; - 到该元素，它将被拉伸100％的容器。

Answer 2

为fullwidth：

设置此脚本

$("body").on("load", ".fullwidth", function() {
    alert('started');
}

然后，您将只能定义class="fullwidth"。

Answer 3

如果它是您的选项（我认为它应该是），您可以使用像Sass这样的css预处理器。 Bootstrap提供了很好的支持。

如果您使用它，您可以使用以下代码：

.fullwidth {
    @include make-xs-column(12);
    @include make-sm-column(12);
    @include make-md-column(12);
    @include make-lg-column(12);
}

虽然，除非你需要否决事情，否则不需要将所有内容定义为12列，因此你可以将xs col设置为12。

Answer 4

你最有可能在这里寻找一个通配符选择器，我做了一个彩虹＆＃39;你的实现应该让你对如何在你自己的代码上实现它有一个非常坚实的想法：

HTML

<div class="col-sl-12">Huge</div>
<div class="col-xl-12">Extra large</div>
<div class="col-lg-12">Large</div>
<div class="col-md-12">Medium</div>
<div class="col-sm-12">Small</div>
<div class="col-vs-12">Very Small</div>
<div class="col-xs-12">Extra Small</div>

CSS

[class$="-12"] { height: 50px; display: block; } /* select attributes that end with '-12' */

/* rainbow colors! */
[class*="sl"] { background-color: purple; } /* select attributes that contain 'sl' */
[class*="xl"] { background-color: blue; }
[class*="lg"] { background-color: green; }
[class*="md"] { background-color: orange; }
[class*="sm"] { background-color: yellow; }
[class*="vs"] { background-color: pink; }
[class*="xs"] { background-color: red; }

使用css定义自定义引导程序列宽

4 个答案: