解决Bootstrap 4导航栏在移动端无法展开的问题

花韻仙語

发布时间：2025-07-18 21:26:23

1005人浏览过

来源于php中文网

原创

解决Bootstrap 4导航栏在移动端无法展开的问题

本教程详细阐述了如何解决Bootstrap 4导航栏在移动端点击折叠按钮后无法展开的问题。核心在于确保navbar-toggler按钮的data-target属性与navbar-collapse元素的id属性精确匹配，这是Bootstrap JavaScript实现折叠功能的关键。同时，文章强调了正确引入JavaScript依赖的重要性，并提供了清晰的代码示例和注意事项。

Bootstrap 4 响应式导航栏的工作原理

bootstrap 4的导航栏（navbar）通过结合html结构、css类和javascript实现响应式布局。在小屏幕设备上，导航项通常会折叠起来，通过一个“汉堡包”按钮（navbar-toggler）来控制其展开和收起。这个机制的核心在于两个关键组件：

折叠按钮 (navbar-toggler): 这是一个
可折叠内容 (navbar-collapse): 这是一个
元素，包含了在小屏幕上需要折叠起来的导航项。它必须拥有一个唯一的id属性。
当用户点击折叠按钮时，Bootstrap的JavaScript会查找data-target属性指向的id，然后切换该元素的显示状态。

问题根源：data-target与id不匹配

在Bootstrap 4导航栏的移动端折叠功能失效时，最常见且直接的原因是折叠按钮的data-target属性值与可折叠内容的id属性值不一致。如果这两个值不匹配，JavaScript将无法正确识别并操作目标元素，导致点击按钮后没有任何反应。

以提供的代码为例，原问题中的navbar-toggler按钮设置了data-target="#collapsibleNavbar"：
然而，其对应的可折叠导航内容div的id却是navbarSupportedContent：
```
    
```
由于#collapsibleNavbar与#navbarSupportedContent不匹配，导致折叠功能失效。

解决方案：确保data-target与id精确匹配

解决此问题的关键在于统一navbar-toggler的data-target属性与navbar-collapse的id属性。您可以选择修改其中一个，使其与另一个保持一致。推荐的做法是保持navbar-collapse的id不变，然后修改navbar-toggler的data-target。

修正后的代码示例：
```
    
        @@##@@
        
        
            FENERİN SESİ
            

            Fenerbahçe Spor Kulübü Taraftar Platformu
            

            
            
                
                
                
                
            
        
         
            
                
                    
                         BRANŞLAR 
                        
                             Futbol
                             Basketbol
                             Voleybol
                        
                    
                    
                        Link 2
                    
                    
                        Link 3
                    
                    
                        Link 4
                    
                    
                        Link 5
                    
                
            
        
    
```
注意事项

除了data-target与id的匹配问题外，还需要确保以下几点，以保证Bootstrap 4导航栏的正常功能：

StickerBaker
免费开源的AI贴纸头像生成工具

下载
1. JavaScript 依赖的正确引入顺序： Bootstrap 4的JavaScript插件依赖于jQuery和Popper.js。因此，在引入bootstrap.min.js之前，必须先引入jquery.min.js和popper.min.js。
  请注意，原问题中[email protected]等占位符需要替换为正确的CDN链接。
2. Bootstrap CSS 文件的引入： 确保已经正确引入了Bootstrap的CSS文件。
3. HTML 结构完整性： 确保navbar-toggler和navbar-collapse都包含在navbar容器内部。
4. 控制台错误检查： 在开发过程中，始终打开浏览器的开发者工具（F12），检查控制台是否有JavaScript错误。这些错误通常能提供线索，帮助诊断问题。
总结

解决Bootstrap 4导航栏在移动端无法展开的问题，最核心的步骤是核对并确保navbar-toggler按钮的data-target属性与navbar-collapse元素的id属性完全一致。同时，验证所有必要的JavaScript依赖（jQuery, Popper.js, Bootstrap JS）是否正确且按顺序引入，也是确保功能正常运行的关键。遵循这些步骤，可以有效解决大部分此类问题，确保您的响应式导航栏在所有设备上都能正常工作。

JavaScript如何实现页面滚动动画_JavaScript滚动事件监听如何优化

如何为可展开文件夹容器添加平滑的 CSS 过渡动画

如何用 HTML/CSS/JavaScript 实现点击按钮弹出视频模态框

如何在 JavaScript 中动态为元素添加 Tailwind CSS 样式

如何用 HTML/CSS/JS 实现点击按钮弹出视频模态框（支持二次点击关闭）

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

538

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

390

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

989

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

541

2023.09.20