Bootstrap 4 Javascript 功能在我的反應項目中不起作用

Question

這些是我的導入語句

import "bootstrap/dist/css/bootstrap.css";
import "jquery/dist/jquery.min.js";

我看到了有關此問題的其他問題，並嘗試了這些解決方案。但對我沒有任何幫助。 我在導航欄中的項目中有一個引導navbar我有一個不工作的dropdownlist （不擴展）。 navbar切換按鈕也不起作用。 下面給出的是我的package.json文件

    {
  "name": "mlt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "bootstrap": "^4.5.3",
    "joi-browser": "^13.4.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

我通過以下命令安裝了引導程序

npm i bootstrap

這是我的jsx代碼

<nav className='navbar navbar-expand-lg navbar-light bg-light'>
                <div className='container-fluid'>
                    <Link className='navbar-brand' to='/'>
                        MLT
                    </Link>
                    <button
                        className='navbar-toggler'
                        type='button'
                        data-bs-toggle='collapse'
                        data-bs-target='#navbarNav'
                        aria-controls='navbarNav'
                        aria-expanded='false'
                        aria-label='Toggle navigation'>
                        <span className='navbar-toggler-icon'></span>
                    </button>
                    <div className='collapse navbar-collapse' id='navbarNav'>
                        <ul className='navbar-nav'>
                            <li className='nav-item'>
                                <NavLink className='nav-link' to='/stock'>
                                    Stock
                                </NavLink>
                            </li>
                            <li className='nav-item dropdown'>
                                <a
                                    className='nav-link dropdown-toggle'
                                    href='#'
                                    id='navbarDropdown'
                                    role='button'
                                    data-bs-toggle='dropdown'
                                    aria-expanded='false'>
                                    Create
                                </a>
                                <ul className='dropdown-menu' aria-labelledby='navbarDropdown'>
                                    <li>
                                        <a className='dropdown-item' href='#'>
                                            Product
                                        </a>
                                    </li>
                                    <li>
                                        <a className='dropdown-item' href='#'>
                                            Parent Product
                                        </a>
                                    </li>
                                    <li>
                                        <a className='dropdown-item' href='#'>
                                            Brand
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li className='nav-item'>
                                <NavLink className='nav-link' to='/remove-products'>
                                    Remove Products
                                </NavLink>
                            </li>
                            <li className='nav-item'>
                                <NavLink className='nav-link' to='/login'>
                                    Login
                                </NavLink>
                            </li>
                        </ul>
                    </div>
                </div>

Answer 1

我在我的項目中這樣做了：

在我的 index.scss 文件中，我有：

@import "~bootstrap/scss/bootstrap";

SCSS 基本上是帶有嵌套的 CSS。 如果您也有能力，將其放入您的項目中是值得的。

此外，您沒有使用 Bootstrap 組件。

代替

<nav ...>

嘗試：

import {Navbar} from "react-bootstrap";
...
<Navbar fixed="top">

這本身可能會解決您的問題。