Hướng dẫn bootstrap 5 collapse not working in react - bootstrap 5 thu gọn không hoạt động trong phản ứng

Vì một số lý do, biểu tượng Navbar bị sụp đổ không mở rộng khi nhấp vào màn hình nhỏ hơn. Tôi đã sao chép ví dụ từ Bootstrap 5 và đảm bảo bao gồm Bootstrap CSS/JS và JQuery.

class NavBar extends Component {
    render() {
      return (
        <div className="NavBar">
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                      <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                      <div className="navbar-nav mx-auto">
                        <HashLink className="navbar-brand" to="/#app">
                            Site
                        </HashLink>
                        <HashLink className="nav-link" to="/#about">
                            About
                        </HashLink>
                        <HashLink className="nav-link" to="/#skills">
                            Skills
                        </HashLink>
                        <HashLink className="nav-link" to="/#experience">
                            Experience
                        </HashLink>
                        <Link className="nav-link" to="/calculator">
                            Calculator
                        </Link>
                      </div>
                    </div>
                </div>
            </nav>
        </div>
      );
    }
}

hỏi ngày 16 tháng 2 năm 2021 lúc 0:30Feb 16, 2021 at 0:30

Evvanerbevvanerbevvanerb

Huy hiệu 1411 Bạc 10 Huy hiệu Đồng1 silver badge10 bronze badges

1

Tôi đã tìm thấy một câu trả lời ở đây hoạt động thông qua Hook React: https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo

import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';

const TopNav = props => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
      <a class="navbar-brand text-info font-weight-bolder" href="/">
        <img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
        <span className="">Discounter</span>
      </a>
      <button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
        <a className="nav-link text-info" href="/contact">Support</a>
        <a className="nav-link text-info" href="/login">Login</a>
        <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
      </div>
    </nav>
  );
}

export default TopNav;

Đã trả lời ngày 16 tháng 2 năm 2021 lúc 3:09Feb 16, 2021 at 3:09

Evvanerbevvanerbevvanerb

Huy hiệu 1411 Bạc 10 Huy hiệu Đồng1 silver badge10 bronze badges

0

Tôi đã tìm thấy một câu trả lời ở đây hoạt động thông qua Hook React: https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo

  import 'bootstrap/dist/js/bootstrap.bundle';

Đã trả lời ngày 16 tháng 2 năm 2021 lúc 3:09Sep 30, 2021 at 10:25

1

Vấn đề là chúng tôi đã không thêm tệp bootstrap js để thêm vào tệp app.js-bs to data-toggle & data-target. thus turning them to data-bs-toggle & data-bs-target respectively.

Đã trả lời ngày 30 tháng 9 năm 2021 lúc 10:25

• Tôi đã gặp sự cố tương tự, tôi đã sửa chúng bằng cách thêm -Bs vào dữ liệu và mục tiêu dữ liệu. do đó chuyển chúng thành dữ liệu-bs-toggle & data-bs-target tương ứng.
• Dưới đây là gói của tôi.
• "Bootstrap": "^5.2.0",
• "JQuery": "^3.6.0",
• "Popper.js": "^1.16.1",

"React": "^18.2.0",

"React-dom": "^18.2.0",

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

Mã ví dụ:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

Thay đổi từAug 14 at 14:47

Thay đổi để:Mars

Đã trả lời ngày 14 tháng 8 lúc 14:472 bronze badges

1

Marsmars

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Phù hiệu bằng đồng 112

Một hành động khác

Một cái gì đó khác ở đâyNov 30, 2021 at 22:14

1

Thuộc tính và giá trị BS 5 nào được sử dụng để tạo ra một hệ thống sụp đổ?

Làm thế nào để sử dụng sự sụp đổ trong bootstrap?

Dữ liệu BS chuyển đổi là gì?