Saya memiliki beberapa kartu yang seharusnya sejajar, tetapi saya harus menggunakan tampilan tidak ada pada mereka. Ketika saya mengklik tombol tertentu, saya ingin menampilkan kartu-kartu ini; tetapi ketika saya melakukan itu, setiap kartu tampak berjajar ketika saya ingin memilikinya di baris yang sama

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

Ini adalah contoh 2 kartu saya

Jika saya membiarkan kode seperti itu, semuanya sebaris yang saya inginkan

Sekarang Jika saya menambahkan beberapa css untuk menyembunyikannya

#menu_lv2r{
    display: none;
}

Baris dengan 2 kartu hilang yang masih bagus.

Tapi sekarang, ketika saya menggunakan beberapa Js untuk mencetaknya lagi, masing-masing muncul dalam satu baris.

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

Terima kasih atas bantuan Anda

0
Minirock 26 Oktober 2019, 00:24

2 jawaban

Jawaban Terbaik

Anda harus menggunakan display: flex untuk elemen induk.

elt.style.display = "flex";

Ini adalah nilai default untuk kelas bootstrap .row.

1
Anton Rusak 25 Oktober 2019, 21:32

Cukup gunakan flex alih-alih inline. Semuanya berfungsi dengan baik

0
Luka 25 Oktober 2019, 21:39