javascript - 使用 javascript 显示内联

Question

我有一些应该是内联的卡片，但我必须在它们上使用 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;
}

两张卡片所在的行消失了，这仍然没问题。

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

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

谢谢你的帮助

Answer 1

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

elt.style.display = "flex";

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