问题标签 [react-bootstrap-nav]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
38 浏览

reactjs - 如何将 Bootstrap react Header 中的 Nav.Link 移动到右侧?

大家好,所以我正在尝试使用 React Bootstrap 为我的网页应用程序制作标题,但我无法将徽标与 Nav.link 分开(它们都放在左侧),但我希望徽标是在左侧同时在右侧的另一个 Nav.link。在正常的引导中,我们只需要在列表中添加 justify-content-end 但是对于 React Bootstrap 它不起作用,有人可以帮我解决这个问题吗?

这是我的代码:

0 投票
0 回答
199 浏览

css - 在 React 中更改 Navbar.Collapse 展开图标的位置

我目前正在使用Navbarreact-bootstrap 中的组件构建导航栏。这是它看起来完全展开和折叠时的样子:

在此处输入图像描述

在此处输入图像描述

我想弄清楚的是,如何将展开图标定位在右侧,将图标+按钮定位在左侧

这是我的代码:

0 投票
1 回答
121 浏览

bootstrap-4 - React-Bootstrap 菜单不显示当前选择

例如,在下图中,选择的菜单是 about,地址字符串显示它,但菜单选项卡仍显示 home

在此处输入图像描述

我是 Bootstrap 的新手

代码是这样的:

我错过了什么?

拉斐尔

0 投票
1 回答
122 浏览

reactjs - React bootstrap Nav.Link 仅在第二次单击时显示为活动状态

我添加了一个基本的 react-bootstrap 导航栏,并将 NavLinks 设置为 react-router .Links。当我单击链接时,它们不会显示为活动状态。它们只会在第二次单击同一链接时显示为活动状态。路由器在 app.js 文件中设置。如何让它们在第一次点击时显示为活动状态?

这是我的 NavBar 组件的代码:

应用程序.js

0 投票
1 回答
215 浏览

javascript - 按键上的 Bootstrap 5 下拉和折叠错误

背景

我的目标是拥有一个带有动画子菜单的 Bootstrap (5) 导航栏/菜单。经过大量研究,我找到了一个似乎可以满足我所需要的解决方案。考虑到可折叠元素可以设置动画,解决方案是使用 data-bs-toggle="collapse" 而不是 'dropdown'。所以假设我有以下标记(仅显示相关标记)......

问题

我已经链接到 Bootstrap css 并加载了完整的 Boostrap Javascript 包。一切似乎都运行良好。但是,如果您打开主菜单和下拉菜单“foo”,然后按 Tab 键进入其中的 3 个选项中的任何一个,然后按“esc”、向上/向下箭头或空格键,它会崩溃并显示以下内容:

版本差异

有趣的是,下载的引导 JS 包(我在这里使用的是 5.1.3)和从 CDN 获得的包(当前为 5.0.2)之间的错误是不同的。

我已经使用旧的 CDN 版本(4.1.3,JQuery,并且将“data-bs-”更改为“data-”以与 Bootstrap 4.x 兼容)对此进行了测试,并且在按下任何键。

在我的项目中,我添加了自己的处理程序,用于使用键盘关闭可折叠等,所以我真的希望能够摆脱这个错误。

其他信息

测试的引导版本:

  • 5.1.3(已下载)(如上所示的错误)
  • 5.02(通过 CDN 交付)(未捕获的类型错误:无法读取未定义的属性(读取“焦点”)
  • 4.1.3(通过 CDN 交付)- 无错误

我不确定这是否是一个错误,但最终的问题是:使用 Bootstrap 5,我如何使用崩溃但没有崩溃?

0 投票
1 回答
34 浏览

react-bootstrap - 我们可以应用 css React Bootstrap Navbar 吗?

我的问题是我从 react bootstrap 导入了一个导航栏,它工作完美,但在全浏览器屏幕上,但在响应后意味着当 max-width 为 360px 导航栏无法正常工作我想在响应后设置我的导航栏内联样式谁能告诉我怎么能我设计了我的导航栏,在此先感谢