时间戳

首页 > 解决方案 > 使用 javascript 内联显示

javascript - 使用 javascript 内联显示

问题描述

我有一些应该是内联的卡片，但我必须在它们上使用 display none。当我点击特定按钮时，我想显示这些卡片；但是当我这样做时，当我想让它们在同一行时，每张卡片似乎都排成一排

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

论文是我的 2 张卡片示例

如果我让这样的代码，它们都是内联的，这就是我想要的

现在如果我添加一些 CSS 来隐藏它们

#menu_lv2r{
    display: none;
}

有 2 张卡片的行消失了，这仍然很好。

但是现在，当我再次使用一些 Js 打印它们时，它们分别出现在一行中。

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

谢谢你的帮助

标签： javascriptcssbootstrap-4

解决方案

您应该使用 display: flex 作为父元素。

elt.style.display = "flex";

这是引导类 .row 的默认值。

推荐阅读