Bootstrap 4导航栏下拉菜单链接
Bootstrap 4 导航栏下拉菜单链接的实现方式如下：
- HTML 结构： 首先，确保你已经引入了 Bootstrap 4 的 CSS 和 JS 文件。然后，创建一个基本的导航栏结构，并在其中添加下拉菜单。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 4 Navbar Dropdown</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav> </body> </html>
- 解释：
navbar：这是导航栏的根元素。navbar-brand：这是品牌名称或图标。navbar-toggler：这是一个按钮，用于在小屏幕设备上切换导航栏的显示状态。collapse navbar-collapse：这是一个容器，用于在小屏幕设备上折叠导航栏。navbar-nav：这是导航链接的容器。nav-item：这是每个导航链接的容器。nav-link：这是实际的导航链接。dropdown：这是下拉菜单的标识。dropdown-toggle：这是触发下拉菜单显示/隐藏的链接。dropdown-menu：这是下拉菜单的内容容器。dropdown-item：这是下拉菜单中的每个链接。
- JavaScript 交互： Bootstrap 4 的下拉菜单依赖于 jQuery 和 Popper.js 来处理交互。确保你已经引入了这些库，否则下拉菜单将无法正常工作。
相关·内容
我有个导航栏让我摸不着头脑。汉堡包菜单打开得很好，下拉列表也打开得很好，但是下拉列表中的链接是不可点击的。当我点击它的时候，它就会再次关闭。桌面和移动设备的行为是相同的。这是我的链接，上面有博主的股票代码。这位博主使用的引导程序是4.2版，但我也尝试了4.4版，但没有效果。任何指导或修复都将不胜感激。谢谢。
浏览 9提问于2019-11-30得票数 0
0回答
我在使用bootstrap的导航栏时遇到了困难。我想创建一个使用bootstrap下拉菜单列表。问题是li在导航栏上。我知道bootstrap有下拉列表，但它用于按钮，在这种情况下是不合适的。我如何在我的引导导航栏中有一个ul li下拉列表？例如，假设我有5个页面，我希望页面是可见的，当我单击以显示在其他4个页面的下方时？我想创建一个导航下拉菜单使用ul内的<em
浏览 9提问于2016-07-21得票数 0
我正在尝试让Bootstrap 4导航栏下拉菜单直接出现在导航栏的正下方，但默认情况下，它会出现在导航栏底部边缘的上方。有没有一种方法可以做到这一点，而不是为导航栏设置一个固定的高度，并使用下拉菜单上的空白处？
如果我没记错的话，Bootstrap 3中的默认设置是将下拉菜单的上边缘与导航栏的下边缘对齐。这似乎
浏览 17提问于2019-11-08得票数 0
我正在使用带下拉菜单的bootstrap 3导航栏。默认的行为是点击打开下拉菜单，第二次点击关闭。我想在第二次点击时访问该链接。是否可以使用默认引导程序functionality>
浏览 3提问于2014-06-03得票数 2
我有一个bootstrap导航栏，我喜欢自己设计颜色等。因此，我使用以下代码更改了下拉菜单导航栏的链接颜色 color:white;它工作得很好，所以如果我有如下菜单项如果我将屏幕变小以折叠导航栏。下拉菜单链接的颜色仍然是默认的，所以我认为bootstrap使用的是媒体查询，不管我怎么尝试
浏览 0提问于2016-11-10得票数 1
我正在使用bootstrap，试图创建一个类似于电子商务的顶级导航栏的Facebook。我向最右上角的链接添加了一个下拉列表，因此链接" account“显示了与帐户相关的操作的下拉列表。下拉菜单很好地右对齐，但菜单面板顶部的小箭头是左对齐的，指向导航栏中的前一个链接。这里的代码是：
对此有什么解决方法/解决方法/替
浏览 1提问于2012-04-19得票数 4
回答已采纳
由于某些原因，下拉链接与Bootstrap导航栏中的其余链接不对齐，并且位置较低。我还可以看到，当使用实时预览时，它被奇怪地放置在它的边界内，这可以在我的屏幕截图中看到。事实上，我不能改变下拉链接的位置在所有的定位，页边距或填充。o-transition: all 0.5s ease-in-out;}
color: #4EB848;
.na
浏览 20提问于2018-02-17得票数 2
在Bootstrap 4中，如何更改导航栏的背景颜色？twbscolor中的代码不起作用。我想让背景颜色变成不同的颜色，字体颜色变成白色。
浏览 3提问于2017-04-13得票数 50
我使用的是bootstrap 4 beta版。
目前，这些都是左对齐，如下图所示。我认为使用块级按钮会在下拉菜单上给我想要的结果，但它
浏览 2提问于2017-10-11得票数 0
2回答
在一个标准的twitter bootstrap导航栏下拉菜单中，我希望有三个链接，通常的文本链接，然后两个字体很棒的图标(也是链接)漂浮在右边。
目前，如果在li元素中放置了多个链接，它将移至新行。
浏览 1提问于2015-04-09得票数 0
我对导航栏使用了bootstrap框架，现在我想使用summernote WYSIWYG HTML编辑器。如果我导入bootstrap.min.js脚本，导航栏下拉菜单可以很好地工作，但夏季备注中的下拉菜单不能(颜色选择等)。
如果我删除此脚本，则summernote可以工作，但导航栏下拉不能。导航栏和summernote下拉功能有什么解决方案吗？
浏览 3提问于2016-10-29得票数 5
有没有比我编写以下代码更好的方法来编写BS-4拆分导航。在一个完美的世界中，我希望每个链接只有一个实例，但我不知道是否有办法做到这一点
<span class="navbar-text h3 p
浏览 0提问于2019-04-09得票数 0
1回答
Bootstrap的导航栏下拉菜单有两个问题。首先，导航栏中的下拉列表在每个页面上都不起作用。导航栏的外观如下所示。
Calendar是一个嵌入到页面中的Google日历。每当我单击日历链接本身时，下拉菜单都不起作用。如果我在日历页上单击后尝试导航到另一页，下拉菜单也不起作用。但是，如果我导航到另一个页面，然后重新加载该页面，则下拉菜单将再次工
浏览 0提问于2016-11-28得票数 0
6回答
我有一个基本的Bootstrap 3响应式导航，如下所示： </ul> </div>
浏览 78提问于2013-08-10得票数 15
回答已采纳
我刚刚转移到Bootstrap 4，并注意到我的应用程序中有一些奇怪的行为。所有的导航栏链接在第一次尝试时都工作得很好，包括下拉菜单，但是在链接的页面加载之后，所有的导航栏链接都失效了。</li> </div>这是Bootstrap 4的一个已知
浏览 2提问于2017-08-19得票数 0
我有很多麻烦，让Bootstrap的滚动间谍在我的网站上工作。具体来说，我想要做的是，当用户在我的站点上滚动时，导航栏中相应的导航栏标题将被高亮显示。我网站上的所有部分都有"id's“，并正确地链接到导航条代码，但出于某种原因，即使我将Scroll间谍放入了body元素中：
用户在我的站点上滚动，对应
浏览 0提问于2018-02-05得票数 0
回答已采纳
2回答
我有一个问题，因为我做了一个导航栏，它是粘性顶部的，它有几个下拉菜单(每个下拉菜单中有许多按钮)。因此，如果设备的高度太小，它会被裁剪，我可以得到更低的按钮。我需要知道如何在导航栏上添加滚动。现在它是这样工作的(使用bootstrap 4.0) 只需将窗口高度更改为300px，您就会看到效果。我需要帮助添加滚动到粘性顶部折叠导航栏。
浏览 23提问于2018-02-17得票数 3
回答已采纳
我正在尝试删除Twitter Bootstrap框架中下拉菜单上显示的箭头。有没有人想出了移除箭头的方法？
浏览 0提问于2012-04-20得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
