Saya menggunakan Bootstrap 4. Di bagian dropdown, item dropdown ditampilkan secara vertikal, yaitu satu di bawah yang lain. Saya item dropdown ini ditampilkan secara horizontal, yaitu satu di samping yang lain.

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
            <a class="navbar-brand" href="index.html">Brand Name</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>                
              </ul>
            </div>
          </nav>

Dalam kode di atas, saya ingin elemen dengan kelas "dropdown-item" ditampilkan satu di samping yang lain. Saya telah menggunakan kode di atas dari situs bootstrap, versi 4.3.1.

1
Shreyas Vaidya 29 Oktober 2019, 09:04

1 menjawab

Jawaban Terbaik

Saya pikir Anda harus menimpa CSS kelas .dropdown-menu. Jadi, alih-alih menimpa kelas ini secara langsung, berikan kelas khusus misalnya .dd-horizontal dan tambahkan CSS di bawah ini.

.dd-horizontal {
   display: flex;
}

Juga, Anda perlu menyesuaikan alat peraga CSS lainnya juga.

1
Yashwardhan Pauranik 29 Oktober 2019, 06:13