Отобразить встроенный JavaScript

Question

У меня есть несколько карт, которые должны быть встроенными, но я не должен отображать их. Когда я нажимаю на определенную кнопку, я хочу отобразить эти карты;но когда я это делаю, кажется, что каждая карта занимает строку, когда я хочу, чтобы они были в одной строке

    <div class="row" id="menu_lv2r">
        <div class="col-lg-2">
            <div class="card card-chart">
                <div class="card-header">Character 1</div>
                <div class="card-body card-body-top">
                    <img class="card-img" alt="character_image" src="./images/char1.jpg"/>
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="card card-chart">
                <div class="card-header">Character 2</div>
                <div class="card-body card-body-top">
                    <img class="card-img" alt="character_image" src="./images/char2.jpg"/>
                </div>
            </div>
        </div>
    </div>

Тезисами были мои примеры с двумя картами

Если я позволю коду вродето, что они все встроенные, что я и хочу

Теперь, если я добавлю несколько CSS, чтобы скрыть их

#menu_lv2r{
    display: none;
}

Строка с двумя картами исчезла, что все еще в порядке.

Но теперь, когда я использую несколько J, чтобы напечатать их снова, они появляются в одной строке каждый.

var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";

Спасибо за вашу помощь

Answer 1

Вы должны использовать display: flex для родительского элемента.

elt.style.display = "flex";

Это значение по умолчанию для класса начальной загрузки .row.

Answer 2

Просто используйте flex вместо inline. Все отлично работает