Terdapat masalah fungsi dengan menu lungsur turun bar navigasi (runtuh) dalam Bootstrap 5
P粉322319601
2023-08-22 20:42:45
<p>Saya menghadapi masalah semasa cuba mencipta menu responsif atau butang lungsur menggunakan <kod>Bootstrap 5</code>. Semuanya nampak baik-baik saja. Kedua-dua ikon navigasi dan ikon drop-down dipaparkan. Tetapi mereka tidak berfungsi. Apabila saya mengklik ikon <kod>nav</kod> atau butang <kod>turun turun</kod> </p>
<p>Saya ingin menyebut secara khusus bahawa saya turut memasukkan fail <kod>jquery</code> Tetapi ia tidak berjaya. Bolehkah seseorang memberitahu saya apa yang berlaku di sini? </p>
<p>Satu perkara terakhir, saya menggunakan beberapa kelas <code>bootstrap</code> (seperti <code>mr-auto</code>, <code>ml-auto</code> dll . ) menghadapi masalah yang serius.Adakah ini pepijat atau adakah <code>bootstrap 5</code> </p>
<p><strong>Berikut ialah kod saya: </strong></p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<pautan
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="tanpa nama"
/>
</head>
<badan>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a href="#" class="navbar-brand">DemoTech</a>
<butang
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</butang>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Mengenai</a></li>
<li class="nav-item"><a href="#" class="nav-link">Hubungi</a></li>
</ul>
</div>
</nav>
<skrip
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="tanpa nama"
></script>
</badan>
</html></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam Bootstrap 5, digunakan dalam Bootstrap 4
data-*属性已被替换为data-bs-*<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar"> <span class="navbar-toggler-icon"></span> </button>Demo
Seperti yang dijelaskan dalam docs, semua sifat data pemalam JavaScript kini diberi ruang nama untuk membantu membezakan fungsi Bootstrap daripada pihak ketiga dan kod anda sendiri. Ini bermakna mana-mana komponen javascript (runtuhkan, bar navigasi, karusel, lungsur turun, tab, modal, dll.) hanya boleh menggunakan atribut
data-bs-....Bootstrap 5 ialah kemas kini utama dengan memecahkan perubahan. Juga, Lihat di sini ,
ml-auto/mr-auto已更改为ms-auto/me-auto.