Angular中的Boostrap 4导航栏下拉菜单在小型设备上不起作用
在Angular中，使用Bootstrap 4导航栏下拉菜单时，在小型设备上可能会出现不起作用的情况。这是因为Bootstrap 4的导航栏下拉菜单默认是通过鼠标悬停来触发的，而在小型设备上没有鼠标悬停的操作，因此无法触发下拉菜单。
解决这个问题的方法是使用Bootstrap 4提供的响应式工具类来实现下拉菜单的触发。具体步骤如下：
- 首先，在导航栏的下拉菜单元素上添加
dropdown类和dropdown-toggle类，以及data-toggle="dropdown"属性。这样可以让下拉菜单在小型设备上通过点击触发。 - 然后，在下拉菜单的父元素上添加
dropdown类。这样可以让下拉菜单在小型设备上显示出来。 - 最后，在下拉菜单的父元素上添加
position-static类。这样可以避免下拉菜单在小型设备上被隐藏。
以下是一个示例代码：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>在上述示例代码中，我们在下拉菜单的父元素<li>上添加了dropdown类，以及在下拉菜单的触发元素<a>上添加了dropdown-toggle类和data-toggle="dropdown"属性。
这样，在小型设备上点击导航栏中的下拉菜单触发元素时，下拉菜单就会显示出来。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云开发（CloudBase）。
相关·内容
1回答
Angular中的Boostrap 4导航栏下拉菜单在小型设备上不起作用
bootstrap-4、angular7、navbar
我在Angular 7项目中添加了一个折叠的导航栏，但当我按下按钮时，它没有显示菜单项。我已经试过改变风格了。添加其他组件，并将导航栏添加到组件中。我甚至尝试重新启动我的计算机，看看它是否会改变，但没有任何结果在styles.scss @import "~bootstrap/dist/css/bootstrap.css";中
在<
浏览 11提问于2020-05-17得票数 0
回答已采纳
1回答
如何将webpack集成到遗产结构项目中？
twitter-bootstrap、twitter-bootstrap-3、webpack
我以一种“遗产的方式”创建了一个小项目，我想要整合webpack。该项目使用angularjs和bootstrap。 'jquery', 'angular',
浏览 0提问于2017-03-27得票数 0
1回答
Bootstrap 4:在小屏幕上使用导航栏菜单上的块级按钮，但在展开时保持正常大小的按钮
html、css、bootstrap-4
我使用的是bootstrap 4 beta版。
目前，这些都是左对齐，如下
浏览 2提问于2017-10-11得票数 0
1回答
在Angular 11项目中使用Boostrap 4
angular-bootstrap
我正在尝试在Angulat 11项目中使用Boostrap 4。在我的asests/styles.scss中，我添加了在我的angular.json中，我添加了jquery.min.js",
"node_modules/boo
浏览 23提问于2021-05-25得票数 0
2回答
检查Android设备是否有软件或硬件导航按钮
android
我正在编写一个带有透明导航栏的Android应用程序。要相应地调整布局，我需要知道设备是有软件按钮还是硬件按钮。在我的研究过程中，我遇到了以下解决方案：这种方法在三星Note 4或HTC One等新设备上不起作用，这些设备没有菜单键
浏览 0提问于2015-02-09得票数 9
回答已采纳
2回答
完全透明状态栏在某些设备上不起作用
android、statusbar
嗨，我试图开发一个完全透明的状态栏和白色导航栏的页面。SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
在parentlayout中的fragment.xml中，我使用了android:fitsSystemWindows="true"，但它在某些<
浏览 0提问于2020-01-15得票数 1
1回答
移动/触摸时显示导航栏
javascript、jquery、css
在移动网站上，顶部有一个导航栏。导航栏位置由position :absolute组成：当向下移动时，导航栏应该是不可见的，当向上移动时，导航栏应该再次可见。在网络上有很多例子如何在桌面上做他的滚动，例如：
这个例子在移动设备上不起</em
浏览 0提问于2015-01-27得票数 0
1回答
Bootstrap下拉菜单在移动设备中不起作用
twitter-bootstrap
我在bootstrap dropdown中遇到了一个问题，它在大屏幕尺寸下工作得很好，但是当在移动设备上测试时，它看起来已经展开了，与以下菜单链接重叠。这是我的导航html：
<!我的头坏了太久了，非常感谢你的帮助！
浏览 0提问于2018-03-16得票数 0
3回答
当边框变成菜单下拉菜单时，如何删除边框？(角度)
html、css、angular、bootstrap-4
我有一个导航栏，上面有3个“项目”。在小屏幕上，这个导航栏变成了一个菜单下拉菜单。在全屏导航栏中，我在"nav-item-1“(项目1)中的边框右边是1px。当边框变成菜单下拉菜单时，如何删除边框？顺便说一句，我正在使用Angular框架和HTML5，SCSS，TypeScript，Bootstrap 4</e
浏览 3提问于2020-07-05得票数 0
2回答
bootstrap 4导航栏下拉菜单在IOS设备/ safari上不起作用
html、twitter-bootstrap、safari、navbar
几天前我刚刚上传了一个新的引导站点。从那时起，我报告说，导航栏不能在IOS设备上工作。此问题不会出现在任何其他设备或浏览器上，只出现在Safari上。当点击/触摸汉堡包符号时，下拉菜单会正确打开，但当单击子菜单-下拉菜单时，整个导航栏都会折叠，而不显示子菜单。因此，子菜单根本无法访问-这基本上使整个网站在IOS上无法访问。下面是我的代码：
<div class="
浏览 2提问于2018-04-03得票数 5
1回答
在ajax调用期间隐藏引导4修复的导航栏
jquery、css、ajax、twitter-bootstrap-4
我只是想知道如何在从数据库加载数据的ajax调用过程中隐藏一个boostrap 4固定顶部的导航栏。然后，在ajax调用之后，导航栏将再次显示。 $('{navbarSelector}').show();将{navbarSelector}文本替换为正确的选择器我尝试使用'n
浏览 18提问于2017-12-23得票数 0
1回答
Bootstrap 4响应式导航栏对齐
alignment、navbar、bootstrap-4
我一直在使用Bootstrap 4。我遇到了一个菜单看起来不对齐的问题。这个问题的示例如下：1)第一个问题(子选项-2未对齐中心)：3)第三个问题(当我调整屏幕大小时，‘选项2’出现了一些填充，我没有对其他元素设置相同的填充)
错误在哪里？
浏览 0提问于2016-02-27得票数 0
2回答
RCP默认透视栏只包含一个透视快捷键？
eclipse-rcp、rcp、perspective
当您有两个透视图时，透视图栏只包含一个透视图快捷方式，如果您想用tab键切换到另一个透视图，则必须单击菜单来选择它。那么，如何将透视图的快捷键都放入透视图栏中，就像在Eclipse中一样？
浏览 6提问于2014-01-11得票数 0
1回答
WordPress菜单问题:下拉菜单标题打开空白页
wordpress、menu、drop-down-menu
我使用的是带有泛滥主题的WordPress 3.1。
我有一个下拉菜单在运行。我创建了一个类别。让我们称它为“我的页面”。我想在这个类别下列出我的网站中的页面(而不是帖子)。在可湿性粉剂的菜单部分，我拖动所需的页面，并将它们放在“我的页面”下。我缩进了它们。我激活了菜单。菜单出现，我可以使用下拉菜单来选择我想要的页面。抱歉，但您正在查找的内容不在
浏览 1提问于2011-04-06得票数 0
回答已采纳
5回答
我可以在没有jquery的情况下使用twitter bootstrap吗？
twitter-bootstrap
我在一个不使用JQuery的项目中工作。
twitter bootstrap依赖于它吗？
浏览 0提问于2013-01-31得票数 104
回答已采纳
1回答
如何在angular2应用程序的下拉列表中显示选定值下的某些内容？
angular、drop-down-menu、angular2-routing、typescript2.0
我开发了angular 2应用程序，左侧导航栏有下拉菜单。但是我想要这样的功能，每当我选择导航栏的下拉列表中的值时，它只在选定的下拉值下显示一些链接列表。这是我编写的代码，用于在导航栏中显示下拉菜单：
<li class="dropdown">
浏览 0提问于2017-10-04得票数 0
3回答
bootstrap模板中奇怪的按钮标签
html、css、twitter-bootstrap
我在基本的bootstrap html 中找到了这个按钮标记(我添加了箭头) --> <button type="button" class"></span> <a class="navbar-brand" href="#">Project name</
浏览 2提问于2015-09-20得票数 0
1回答
保存HTML和CSS时的引导问题
html、css、twitter-bootstrap
我对此进行了搜索，并尝试了几个不同的关键字。我正在尝试学习和使用Boostrap。几个月前我以为我已经很好地掌握了这一点。但是现在我遇到了一个问题，那就是仅仅是库存文件在工作。我想使用Jumbotron和静态导航栏。在我保存静态导航栏文件和它的CSS并更改它的位置后，下拉菜单就不起作用了……
我对代码所做的唯一两件事就是更改navbar.css和bootstrap
浏览 1提问于2015-06-02得票数 0
2回答
如何去除角度上的自动对焦？
javascript、angular、angular-material、angular-material2
我用angular 6与angular material design.I结合，用toggle menu图标简单的应用slidebar。我面临一个问题，.whenever，我正在从slidebar menu中选择任何项目，目前我有3项目，选择任何项目.It，关闭幻灯片栏导航，但我的menu button是自动焦点。这是我的密码
步骤复制此bug
选择任何选项，它关闭边栏
浏览 0提问于2018-06-17得票数 1
回答已采纳
2回答
带angular 2和bootstrap 4的响应式导航栏
twitter-bootstrap、angular、responsive-design
我正在尝试建立一个web应用程序与顶部的导航栏与一些选项。然而，当在移动设备上查看网站时，导航栏缩小，并出现一个图标，供用户按下以显示选项。与本网站中显示的行为完全相同我试过bootstrap 4的例子，但是它们在angular 2上似乎不能很好地工作(Dropdown不
浏览 4提问于2017-01-19得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
