Использовать css для определения ширины столбца начальной загрузки

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% от его контейнера. Нет необходимости в пользовательских классах. Если элемент является встроенным элементом уровня - просто добавьте display: block; - к этому элементу, и он будет растянут на 100% от его контейнера.

Answer 2

Есть скрипт для вашего fullwidth:

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

Тогда вы сможете определить только class="fullwidth".

Answer 3

Если это вариант для вас (и я думаю, что он должен), вы можете использовать предварительный процессор css, например, Sass. Там есть хорошая поддержка, предоставляемая Bootstrap.

Если вы используете это, вы можете использовать код вроде:

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

Хотя, если вам не нужно, чтобы отменить вещи, нет необходимости определять все 12 колонок, так что вы можете просто установить хз Col в 12.

Answer 4

Вы, скорее всего, ищет подстановочные селектор здесь, я сделал реализацию «радуги» для вас, которые должны дать вам очень четкое представление о том, как реализовать это на свой собственный код:

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; }