Hướng dẫn bootstrap navbar-collapse not working - bootstrap navbar-sụp đổ không hoạt động

Cố gắng bắt đầu tìm hiểu về bootstrap. Tôi tạo rất ít mã để tạo menu đáp ứng, như thế này

    
    
    
    


    

        

            

                
                    
                    
                    
                
                Application Name
            
            

                

                    
Home
                    
Home
                    
Home
                
            
        
    
    

Câu hỏi của tôi là, tại sao khi tôi cố gắng chọn menu trong trình duyệt nhỏ, menu không hiển thị? Ai đó có thể cho tôi biết tại sao? cảm ơn

Josh Crozier

225K54 Huy hiệu vàng383 Huy hiệu bạc 301 Huy hiệu đồng54 gold badges383 silver badges301 bronze badges

Hỏi ngày 12 tháng 12 năm 2013 lúc 7:43Dec 12, 2013 at 7:43

Geuss của tôi là bạn đã không tải jQuery. Đặt cái này vào tiêu đề của bạn và xem nó có hoạt động không:

Ngoài ra, tôi đề nghị tải tệp Bootstrap JS trong tiêu đề, ngay sau thư viện jQuery.

Đã trả lời ngày 12 tháng 12 năm 2013 lúc 7:50Dec 12, 2013 at 7:50

Rất có thể là vì tập lệnh bootstrap.js dựa vào jQuery để làm việc. Hãy thử bao gồm jQuery trước bootstrap.js

Đã trả lời ngày 12 tháng 12 năm 2013 lúc 7:50Dec 12, 2013 at 7:50

Rất có thể là vì tập lệnh bootstrap.js dựa vào jQuery để làm việc. Hãy thử bao gồm jQuery trước bootstrap.js

Không chắc chắn nếu điều này có ích nhưng tôi nhận thấy rằng trên trang web bootstrap, nó bảo bạn liên kết các tệp JS theo chân trang.

Tôi cũng đã có WordPress đặt chúng vào tiêu đề của mình vì tôi phải giới thiệu các tập lệnh trong tệp function.php của tôi. Khi tôi đã xóa liên kết đến tệp jquery.js và bootstrap-min.js Trong chân trang, nút NAV bắt đầu sụp đổ chính xác.Sep 17, 2014 at 22:17

1

5

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.
Learn more.

Tôi đang cố gắng sử dụng: Bootstrap 4 Navbar và nó sẽ không sụp đổ trên React. https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

Ai đó có thể giải thích tại sao? Tôi cho rằng điều này có thể là do sẽ cần sửa đổi các thành phần để thay đổi trạng thái? Nhưng nó chỉ là dự đoán của tôi.

import React from "react";
import ReactDOM from "react-dom";

import registerServiceWorker from "./registerServiceWorker";
// styles
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(

, document.getElementById("root"));
registerServiceWorker();

hỏi ngày 14 tháng 1 năm 2018 lúc 11:11Jan 14, 2018 at 11:11Jan 14, 2018 at 11:11

Yaniv peretzyaniv peretzYaniv PeretzYaniv Peretz

1.0022 Huy hiệu vàng13 Huy hiệu bạc22 Huy hiệu Đồng2 gold badges13 silver badges22 bronze badges2 gold badges13 silver badges22 bronze badges

3

Hãy thử thêm bootstrap.js vào import của bạn sau khi bạn nhập jquery:

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

Đã trả lời ngày 14 tháng 1 năm 2018 lúc 13:26Jan 14, 2018 at 13:26Jan 14, 2018 at 13:26

0

Giải pháp tốt nhất đối với tôi là chỉ nhập tập lệnh Bootstrap sụp đổ.js trong thành phần Navbar để ngăn chặn các tập lệnh trộn JS.

Bao gồm điều này ở đầu thành phần Navbar.jsx của bạn:

import "bootstrap/js/src/collapse.js";

Đã trả lời ngày 28 tháng 4 năm 2019 lúc 12:58Apr 28, 2019 at 12:58Apr 28, 2019 at 12:58

HMAZIADHMAZIADHMaziadHMaziad

1692 Huy hiệu bạc4 Huy hiệu đồng2 silver badges4 bronze badges2 silver badges4 bronze badges

Đơn giản chỉ cần nhập bootstrap.min.js sau bootstrap.min.css

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

Đã trả lời ngày 8 tháng 11 năm 2020 lúc 19:42Nov 8, 2020 at 19:42Nov 8, 2020 at 19:42

MysticmozmysticmozMysticMozMysticMoz

Huy hiệu 611 Bạc1 Huy hiệu Đồng1 silver badge1 bronze badge1 silver badge1 bronze badge

1

Nếu đó là bootstrap v3, có thể cố gắng thay đổi lớp

Trên trang NPM Bootstrap 3.3.7 là phiên bản mới nhất ..

Đã trả lời ngày 14 tháng 1 năm 2018 lúc 13:38Jan 14, 2018 at 13:38Jan 14, 2018 at 13:38

Merkomerkomerkomerko

1.2032 huy hiệu vàng20 Huy hiệu bạc35 Huy hiệu đồng2 gold badges20 silver badges35 bronze badges2 gold badges20 silver badges35 bronze badges

1

Nếu bạn sử dụng React, hãy chắc chắn rằng Navbartoggle và Navbarcollapse nằm trong thẻ Navbar

Đã trả lời ngày 17 tháng 8 lúc 11:01Aug 17 at 11:01Aug 17 at 11:01

za-ekza-ekza-ekza-ek

3473 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges3 silver badges8 bronze badges