У меня есть несколько карт, которые должны быть встроены, но я не должен отображать их. Когда я нажимаю на определенную кнопку, я хочу отобразить эти карты; но когда я делаю это, каждая карта появляется по очереди, когда я хочу, чтобы они были в одном ряду
<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";
Спасибо за вашу помощь
2 ответа
Вы должны использовать display: flex для родительского элемента.
elt.style.display = "flex";
Это значение по умолчанию для класса начальной загрузки .row.
Просто используйте flex вместо inline. Все отлично работает
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.