解决Bootstrap 4导航栏在移动端无法展开的问题-js教程-PHP中文网

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

花韻仙語

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

原创

991人浏览过

解决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): 这是一个<button>元素，负责触发导航内容的折叠/展开。它通常包含data-toggle="collapse"属性和data-target属性。
可折叠内容 (navbar-collapse): 这是一个<div>元素，包含了在小屏幕上需要折叠起来的导航项。它必须拥有一个唯一的id属性。

当用户点击折叠按钮时，Bootstrap的JavaScript会查找data-target属性指向的id，然后切换该元素的显示状态。

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

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

以提供的代码为例，原问题中的navbar-toggler按钮设置了data-target="#collapsibleNavbar"：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

登录后复制

然而，其对应的可折叠导航内容div的id却是navbarSupportedContent：

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <!-- 导航项内容 -->
</div>

登录后复制

由于#collapsibleNavbar与#navbarSupportedContent不匹配，导致折叠功能失效。

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

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

修正后的代码示例：

<div class="baslik baslik1 baslik2 ">
    <nav class="navbar bg-light navbar-light navbar-expand-sm sticky-top ">
        <a href="./index.html" class="navbar-brand"><img src="img/512x512logo.png" alt="fenerbahçe logo" width="20%"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <!-- 修改此处，使其匹配navbar-collapse的id -->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="title title1 title2">
            <h1 style="font-size: 40px;"class="navbar-text ml-5 mx-5">FENERİN SESİ</h1>
            <br>
            <small class="mx-4 ">Fenerbahçe Spor Kulübü Taraftar Platformu</small>
            <br>
            <div class="alt-cizgi alt-cizgi1 alt-cizgi2 title"></div>
            <div class="sosyal-medya-logolar">
                <a href="#" onclick="openInNewTab('https://www.facebook.com/fenerbahce'); return false;"><i class="fab fa-facebook fa-lg" style="color: #043d9f;"></i></a>
                <a href="#" onclick="openInNewTab('https://www.twitter.com/fenerbahce'); return false;"><i class="fab fa-twitter fa-lg" style="color: #043d9f;"></i></a>
                <a href="#" onclick="openInNewTab('https://www.instagram.com/fenerbahce'); return false;"><i class="fab fa-instagram fa-lg" style="color: #043d9f;"></i></a>
                <a href="#" onclick="openInNewTab('https://www.youtube.com/fenerbahce'); return false;"><i class="fab fa-youtube fa-lg" style="color: #043d9f;"></i></a>
            </div>
        </div>
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <!-- 此处id保持不变 -->
            <div class="dropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> BRANŞLAR </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#"><i class="fal fa-futbol" style="color: #000000;"></i> Futbol</a>
                            <a class="dropdown-item" href="#"><i class="fal fa-basketball-ball" style="color: #000000;"></i> Basketbol</a>
                            <a class="dropdown-item" href="#"><i class="fal fa-volleyball-ball" style="color: #000000;"></i> Voleybol</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 4</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

登录后复制

注意事项

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

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

JavaScript 依赖的正确引入顺序： Bootstrap 4的JavaScript插件依赖于jQuery和Popper.js。因此，在引入bootstrap.min.js之前，必须先引入jquery.min.js和popper.min.js。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- 如果有自定义的JS文件，放在最后 -->
<script src="js/index.js"></script>

登录后复制

请注意，原问题中[email protected]等占位符需要替换为正确的CDN链接。

Bootstrap CSS 文件的引入： 确保已经正确引入了Bootstrap的CSS文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

登录后复制

HTML 结构完整性： 确保navbar-toggler和navbar-collapse都包含在navbar容器内部。
控制台错误检查： 在开发过程中，始终打开浏览器的开发者工具（F12），检查控制台是否有JavaScript错误。这些错误通常能提供线索，帮助诊断问题。

总结

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

以上就是解决Bootstrap 4导航栏在移动端无法展开的问题的详细内容，更多请关注php中文网其它相关文章！