Col-* с использованием полной ширины строки вместо ширины столбца ⇐ CSS

[Anonymous]

Я пытаюсь создать карточки из массива, но при создании элементов div «col» они занимают всю ширину строки вместо назначенной им ширины в соответствии с классом.
Вот фрагмент страницы:

Код: Выделить всё

[i]










[/i]

А вот JS-код, создающий столбцы;

Код: Выделить всё

let content = '';

fullCards.forEach((cards) => {
console.log("One Card Added...")
content += `



[h4]${cards.cardname} - ${cards.card_set_number}/${cards.cards_in_set}[/h4]

${cards.set_code} - ${cards.set}


[img]${cards.img}[/img]

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago


`;

});
content += ''
//console.log(content)
document.querySelector("#cardlist").innerHTML += content;

Однако каждый созданный столбец принимает ширину:100 % из класса строки, а не использует назначенную ширину столбца.
Вы можете увидеть это в Интернете. проверка здесь:


Не знаю, почему это не так. не используете ширину col, возможно, это связано с тем, что она создается после того, как страница готова?

Подробнее здесь: https://stackoverflow.com/questions/786 ... -col-width