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

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

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

0
Minirock 26 Окт 2019 в 00:24

2 ответа

Лучший ответ

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

elt.style.display = "flex";

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

1
Anton Rusak 25 Окт 2019 в 21:32

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

0
Luka 25 Окт 2019 в 21:39