bootstrap 3导航栏折叠按钮不工作
Bootstrap是一个流行的前端开发框架，提供了丰富的组件和样式，方便开发人员快速构建响应式网站。Bootstrap 3是Bootstrap框架的旧版本，其中导航栏折叠按钮是一个常见的组件，用于在小屏幕设备上折叠和展开导航栏。
如果在使用Bootstrap 3的导航栏折叠按钮时遇到不工作的问题，可能有以下几个原因和解决方法：
- 引入Bootstrap相关文件：确保在HTML文件中正确引入了Bootstrap的CSS和JavaScript文件。可以通过以下链接下载Bootstrap 3的文件：
- 检查HTML结构：确保导航栏的HTML结构正确，包括正确的class和id属性。导航栏折叠按钮通常需要一个具有
.navbar-toggle类的按钮元素和一个具有.navbar-collapse类的折叠内容容器。 - 引入jQuery库：Bootstrap的JavaScript组件依赖于jQuery库，因此需要在HTML文件中正确引入jQuery库。可以通过以下链接下载jQuery库：
- 检查JavaScript代码：确保在HTML文件中正确调用了Bootstrap的JavaScript代码。通常需要在页面加载完成后初始化导航栏折叠按钮的功能，可以使用以下JavaScript代码：$(document).ready(function() { $('.navbar-toggle').click(function() { $('.navbar-collapse').toggle(); }); });
以上是一般情况下解决Bootstrap 3导航栏折叠按钮不工作的常见方法。如果问题仍然存在，可以进一步检查浏览器控制台是否有错误提示，或者参考Bootstrap官方文档和社区论坛中的相关讨论。
相关·内容
3回答
可折叠引导导航栏
twitter-bootstrap、navbar
我的可折叠导航栏有问题。当我点击按钮时，它显示可折叠的按钮，而不是"li“。
以下是代码
<!DOCTYPE html>
<html>
<head>
<title>Navbar Collapse</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" href="jque
浏览 2提问于2016-04-24得票数 0
回答已采纳
2回答
缩小屏幕尺寸并按下按钮后，中心对齐肚脐。
html、css、twitter-bootstrap、twitter-bootstrap-3
我是一个HTML/CSS的新手，我正在创建一个网页，上面有一个响应性导航栏。我面临的问题是，当navbar被折叠并按下按钮时，navbar-items在打开的导航菜单的左侧对齐。我希望这些项目与菜单上的中心对齐。我在和上搜索了很多，但是我无法找到解决问题的方法。
下面是我正在使用的HTML代码：
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
浏览 4提问于2016-08-07得票数 3
回答已采纳
1回答
数据切换和数据目标不工作BootStrap 3
html、twitter-bootstrap、css
我使用的是BootStrap 3.4.1，但折叠不起作用。我使用的是PHPStorm，它不能识别数据切换和数据目标。虽然上面没有打字错误。
我正在从PluralSight学习bootstrap。尝试来自不同网站的解决方案，包括w3schools和stackoverflow。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>
浏览 59提问于2019-05-19得票数 0
回答已采纳
3回答
导航栏折叠在Bootstrap上不工作
css、twitter-bootstrap
我不能在Bootstrap 3中工作导航栏崩溃。
当我改变屏幕尺寸时，我的菜单会很好地折叠，只是当我按下按钮时它不会显示菜单。
这是我的代码：
<header class="container">
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" da
浏览 0提问于2013-11-20得票数 2
2回答
引导导航栏折叠样式不正确
html、css、twitter-bootstrap
我在bootstrap中有一个可折叠的导航栏，它在折叠时不能正确显示。我正在使用pull-right将navbar-header (其中包含navbar-品牌)移动到右侧。但是，添加此选项似乎会使切换的导航栏位于切换按钮和导航栏品牌之间。我希望切换的导航栏位于按钮和品牌下方，无论何时它是打开的。
这是格式正确的版本，但是，品牌不会被拉到右边
这就是当我把Brand拉到路边时发生的事情
这是我正在使用的代码。引导程序版本为3.3.6
<nav class="navbar navbar-default">
<div class="conta
浏览 16提问于2016-08-15得票数 0
回答已采纳
1回答
NavBar:折叠所有链接，包括下拉切换
jquery、bootstrap-4
我有一个引导导航栏，如下所示： <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header nav-tabs" style="border-bottom:none;">
<button type="button" class="navbar-to
浏览 12提问于2020-10-29得票数 0
2回答
Bootstrap 3中的导航栏折叠在IE8中不起作用
html、css、twitter-bootstrap、internet-explorer-8、twitter-bootstrap-3
我正在使用Bootstrap 3建立一个网站。我遵循了这个问题中的每个建议- 。我已经包含了respond.js和html5shiv.js文件，除了导航栏崩溃之外，一切都运行得很好。这是导航栏-折叠代码：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
浏览 0提问于2014-06-12得票数 0
2回答
如何显示从折叠btn (引导)下拉菜单？
javascript、jquery、html、css、twitter-bootstrap
我有这个引导导航栏的代码，我增加了折叠功能，所以每当你有一个小屏幕，它就会将页面链接折叠成按钮，只要你按下btn，它就会打开下拉菜单，但是当我点击折叠btn时，会遇到问题，什么都不会发生，请帮助！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<met
浏览 2提问于2017-01-22得票数 2
回答已采纳
1回答
引导导航栏在大屏幕上的折叠按钮？
html、css、bootstrap-4
我在我的网站上有一个Bootstrap导航栏，我需要使导航栏折叠按钮在大屏幕上像在移动设备上工作。我该怎么做？ <nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
<button class="navbar-toggler" type="button" data-toggle="collaps
浏览 11提问于2019-12-19得票数 0
回答已采纳
1回答
在Bootstrap3中，如何更改navbar中折叠元素的顺序？
css、twitter-bootstrap
我使用的是Bootstrap3 <nav>，在示例代码中，团队使用navbar-toggle collapsed类将元素折叠到小屏幕上的导航栏中。
我的问题是在崩溃时如何改变它们的顺序？我做了一个简短的片段：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jqu
浏览 2提问于2017-07-28得票数 1
回答已采纳
1回答
引导导航栏未打开或折叠
html、twitter-bootstrap、navbar
我在找可折叠的导航栏。我用下面的代码尝试了一下，但没有成功。
以下是我的代码：
<!DOCTYPE html>
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com
浏览 0提问于2016-12-15得票数 0
2回答
尝试使用引导带肚脐键
javascript、jquery、html、css、twitter-bootstrap
我正在尝试使用引导导航栏切换，所以当我的站点在ipad或手机上被查看时，导航功能就会被折叠，并且应该会出现一个切换按钮。目前，我的肚脐崩溃，然而，它没有显示切换按钮。这是我目前正在使用的代码。
<div class="row navbar">
<div class="col-md-12">
<nav id="menu1" class="navbar" role="navigation">
<div class="n
浏览 2提问于2014-10-09得票数 1
回答已采纳
1回答
Bootstrap 3搜索条
html、css、twitter-bootstrap、navbar、collapse
嗨，我正在尝试在一个标准的bootstrap 3模板中包含一个搜索栏。我试图以这样一种方式实现它:当菜单以较小的分辨率折叠时，搜索栏停留在导航栏中，其余的菜单按钮折叠。我让它在桌面分辨率下工作得很好，但当我切换到移动分辨率时，搜索栏就会显示在我的标题和导航按钮下面。这就是我目前正在使用的HTML。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"&g
浏览 0提问于2013-10-10得票数 3
回答已采纳
1回答
使用jquery和bootstrap的可折叠导航栏，在手机上不起作用，在桌面上正确显示
jquery、twitter-bootstrap-3、responsive-design、navbar、collapsable
我已经用bootstrap和jquery编写了一个可折叠的导航栏，它在我的桌面上工作得很好，但上传到互联网后不会折叠。按钮不再出现，链接也不再起作用。我在Safari 6.1.2，Firefox 43.0.2和Google Chrome 47.0.2526.106 (64位)上试用过。
如前所述，桌面上的一切工作正常。然而，在iPad上，链接开始中断，在我的iPhone (Safari，启用了JavaScript )上，它根本不起作用(既不能折叠导航栏，也不能链接)。
我已经检查了一个移动jquery版本的脚本链接，把jquery.min.js放在bootstrap.js之前，所有的脚本都在互
浏览 3提问于2015-12-31得票数 0
1回答
引导导航条在试图使其可折叠时出现故障
html、css、bootstrap-4、navbar、visual-glitch
我从w3schools.com获得了导航条的示例代码。它使用的是引导。以下是代码：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="
浏览 2提问于2020-12-25得票数 0
回答已采纳
1回答
当用户在菜单之外单击时，如何关闭Bootstrap导航栏下拉菜单？
javascript、twitter-bootstrap、navbar
我有一个Bootstrap导航栏，它会在缩小时折叠，并在点击/单击切换按钮时作为菜单下拉。但是，一旦打开，它将保持打开状态，直到再次单击切换按钮。当用户A)点击菜单区域之外，B)在移动设备上向上或向下滚动页面时，有没有办法自动关闭它？下面是折叠时导航栏的外观：
下面是下拉列表：
我需要下拉到折叠时，黄色区域或任何菜单项被点击(除了搜索框)。到目前为止，我的JS是这样的：
// prevent search box from vanishing upon click in responsive mode
$('input.form-control').clic
浏览 3提问于2015-09-08得票数 0
1回答
Bootstrap导航栏汉堡图标不显示
html、css、twitter-bootstrap、twitter-bootstrap-3
我有一个带有汉堡图标的导航栏，我正试着和bootstrap一起使用。我试着使用我在网上找到的一个例子，但当我运行它时，汉堡图标丢失了，下拉菜单已经展开了，但它不应该展开，默认情况下它应该是折叠的。在我的例子中，标题是，WebSiteName，在导航栏的右边，但在我要离开的例子中，它在左边。下面是我使用的html代码： <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ma
浏览 24提问于2021-04-27得票数 0
2回答
为什么我的导航栏折叠切换在react中不起作用
javascript、jquery、css、reactjs、twitter-bootstrap
我想创建一个响应式导航栏。但是切换不起作用。我该怎么办？ 我按照引导程序文档中的指定添加了引导程序、jQuery和popper.js链接，并创建了一个导航栏组件。导航栏的样式与未折叠时的样式相同，但折叠后切换不起作用。 import React, { Component } from 'react';
import "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap";
import 'bootstrap/dist/css/bootstrap';
class
浏览 10提问于2019-05-19得票数 2
回答已采纳
0回答
如何在导航栏(菜单)项目上应用或更改颜色
html、css、twitter-bootstrap-3
我正在尝试弄清楚如何在我的导航栏的右边得到一个图像。一旦我的导航栏被折叠，我的导航栏右边也会有一张图片。
此外，我不知道如何让我的导航栏在滚动时固定在页面顶部。我已经尝试了navbar-fixed top，但是没有用。
Im正在使用引导程序
这是我的代码..
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color
浏览 6提问于2017-12-15得票数 0
3回答
为什么我的Bootstrap折叠导航栏不工作？
html、css、twitter-bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel=&#
浏览 4提问于2015-12-22得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
