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}


[i]

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 % из класса строки, а не использует назначенную ширину столбца.
Вы можете увидеть это в Интернете. проверка здесь:
[![Веб-проверка][1]][1]
Не знаю, почему не используется ширина столбца, возможно, это связано с тем, что создается после того, как страница готова?

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

let searchCount = "Not yet set";
let fullCards = [];
let normalP = "Not Set";
let normalPZAR = "Not Set";
let revP = "Not Set";
let holoP = "Not Set";

function fra_tcg_io() {

console.log("Started Function");

let cardArray = [
{
"_id": "cardID-",
"cardname": "test",
"img": "test",
"set": "test",
"set_code": "test",
"card_set_number": "test",
"cards_in_set": "test",
"tcgN": normalP.toString(),
"tcgR": revP.toString(),
"tcgH": holoP.toString()

}
]

fullCards.push(cardArray[0])

let cardArray2 = [
{
"_id": "cardID-",
"cardname": "test2",
"img": "test2",
"set": "test2",
"set_code": "test2",
"card_set_number": "test2",
"cards_in_set": "test2",
"tcgN": normalP.toString(),
"tcgR": revP.toString(),
"tcgH": holoP.toString()

}
]

fullCards.push(cardArray2[0])

let cardArray3 = [
{
"_id": "cardID-",
"cardname": "test3",
"img": "test3",
"set": "test3",
"set_code": "test3",
"card_set_number": "test3",
"cards_in_set": "test3",
"tcgN": normalP.toString(),
"tcgR": revP.toString(),
"tcgH": holoP.toString()

}
]

fullCards.push(cardArray3[0])

create_cards()

};

function create_cards (){

console.log("Creating Cards...")

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

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

Trol En Padda - TCG Collecting South Africa

[*]      rel="icon"
href="assets/img/trolenpadda/favicon-32.png"
type="image/x-icon"
/>




WebFont.load({
google: { families: ["Public Sans:300,400,500,600,700"] },
custom: {
families: [
"Font Awesome 5 Solid",
"Font Awesome 5 Regular",
"Font Awesome 5 Brands",
"simple-line-icons",
],
urls: ["assets/css/fonts.min.css"],
},
active:  function ()  {
sessionStorage.fonts = true;
},
});

















[url=/]
[img]assets/img/trolenpadda/landscape-logo-135-sharp.png[/img]
                alt="navbar brand"
class="navbar-brand"
height="20"
/>
[/url]


[/i]


[i][/i]



[i][/i]






[list]

[url=/]
[i][/i]
Restart Search
[/url]

[*]

[i][/i]

[h4]Other Goodies[/h4]

[*]
[url=#]
[i][/i]
My Collection - Coming Soon
[/url]

[*]
[url=#]
[i][/i]
FAQ - Coming Soon
[/url]

[*]
[url=#]
[i][/i]
Contact Us - Coming Soon
[/url]

[/list]









[url=index.html]
[i]                  src="assets/img/trolenpadda/landscape-logo-135-sharp.png"
alt="navbar brand"
class="navbar-brand"
height="20"
/>
[/url]


[/i]


[i][/i]



[i][/i]












[i][/i]


[i]                    type="text"
placeholder="Find another card..."
class="form-control"
/>















[img]/assets/img/trolenpadda/landscape-logo-1350.png[/img]










[/i]














.  Gotta Catch 'em All!











































document.getElementById("year").innerHTML = new Date().getFullYear();






window.addEventListener("load", function(){
fra_tcg_io();

});

После добавления фрагмента выяснилось, что в начальной загрузке произошла ошибка. min.css, который использовался.

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