react-bootstrap 相关问题

为什么 React-bootstrap 中的 Navbar 组件没有导入到我的 NextJS 应用程序中？

我目前正在 [email protected] 应用程序上构建一个项目，使用 React v 18.3.1。我已经安装了react-bootstrap 2.10.6和bootstrap 5.3。但是，我在使用导航栏组件时遇到了问题...

为什么没有填充 Formik `touched` 属性？

我正在使用 React、Formik、react-bootstrap 和 yup 制作一个表单进行验证。我正在尝试显示验证错误，但触摸的属性未填充字段。 常量计划...

LinkContainer组件react-router-bootstrap错误有解决方案吗？

所以我使用react-router-bootstrap中的LinkContainer组件来包装bootstrap中的Nav.Link组件。请参考下图以供参考。 // 片段 导入{LinkContainer...

删除 React Bootstrap 中的下拉箭头

我正在尝试使用以下CSS删除下拉箭头，但它没有产生任何效果。 .dropdown::之后{ 显示：无！重要； } 这是代码 我正在尝试使用以下 css 删除下拉箭头，但它没有产生任何效果。 .dropdown::after{ display: none !important; } 这是代码 <NavDropdown className={classes.user} title="Componentes" id="collasible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> 这是 Bootstrap 下拉箭头中的 CSS： 因此，为了覆盖它，您需要使用相应的 CSS 选择器： .dropdown-toggle::after { display: none !important; } 请注意，也许不需要包含 !important。 不确定这是否已解决，我在选择下拉菜单时遇到了类似的问题，结果发现插入符号/箭头是背景图像，您可以将其设置为 CSS 中的背景图像：无来删除它。

reactstrap和react-bootstrap有什么区别？

我发现了两个不同的reactjs引导程序 npm安装--保存reactstrap反应react-dom npm 安装react-bootstrap bootstrap 两者之间的基本和主要区别是什么？

加载微调器未显示在 React JS Web 应用程序中

我试图在我的 React Web 应用程序中包含一个加载微调器，以在 API 获取数据时显示加载动画。下面是代码： 从“next/head”导入头； 导入反应，{

Prime React 下拉过滤器无法正常工作

我正在使用 primereact/dropdown 来呈现我的位置列表，用户可以在列表中选择，但我也在下拉列表中使用过滤方法来使用户也可以进行搜索

react-bootstrap 中的 Apexcharts 没有绘制图表，即使 console.log 显示 useState 能够从 Flask 中获取它

目标：从 Flask 获取数组的 json 转储并用 apexcharts 绘制它们的图表 那么开始吧。 Flask 中有 6 个名为 arr 的元素列表，它以 json 形式返回 返回 json.dumps(arr) 然后在反应-

栏目内容溢出栏目

我正在使用 React 和 Bootstrap。 我定义了一个容器、一行和列。 当屏幕缩小时，页面会做出响应，因为列相对于页面缩小或扩展。 然而，...

在react-bootstrap中更改NavDropdown的颜色和背景颜色

在react-bootstrap中使用我的NavDropdown，我无法设置其颜色或背景颜色的样式...... 使用 NavDropdown 中的 react-bootstrap，我无法设置其颜色或背景颜色的样式... <NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" > <LinkContainer to="/about"> <MenuItem eventKey={3.1} className="text-center">About</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/products"> <MenuItem eventKey={3.2} className="text-center">Products</MenuItem> </LinkContainer> <MenuItem divider /> <LinkContainer to="/blog-index"> <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem> </LinkContainer> </NavDropdown> 我可以使用 style={{ fontSize: '130%' }} 更改字体大小，但我还想使用 .. 更改颜色和背景颜色 style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }} ...但是 color 和 backgroundColor 在括号内不起作用。 我尝试做的一件事是将 <NavDropdown> 元素包装在样式 div 中，但这搞乱了导航栏元素的对齐方式。 还可以提供标题文本作为 JSX 元素。 <NavDropdown title={ <span className="text-primary my-auto">Dropdown</span> } id="nav-dropdown" > <NavDropdown.Item>Action</NavDropdown.Item> <NavDropdown.Item>Another action</NavDropdown.Item> </NavDropdown> 并且不需要编写自定义 CSS，这可能是我们想要避免的。 设置 NavDropdown 的 id 并为此 id 创建 css 样式。 反应中： <NavDropdown title={"Example"} id="nav-dropdown"> 在 CSS 中： #nav-dropdown{ color: white; font-weight: bold; background-color: red; } 使用 Chrome 中的检查元素工具检查后。我通过在我的index.html中添加以下几行来使其工作' div.dropdown-menu.show { background-color: #000000; // for drop down menu color } a.dropdown-item { color: #ffffff; // for font color of individual drop down item } ` 对于您选择的选择器。您提供的代码结构中不存在这一点。您是如何想出选择器的？

我想删除 Bootstrap 链接中的下划线

我见过类似的问题，但解决方案建议通过css来改变它。 我尝试过但无法重现我的代码的解决方案。目前链接看起来像这样 我还探索了react-boo...

更改 React Bootstrap Modal.Header closeButton 图标

我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但这没有用。 购物车 我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但没有成功。 <Modal.Header className='modal-head' closeButton> <Modal.Title>Cart</Modal.Title> </Modal.Header> 我不认为react-bootstrap库本身提供任何这样的东西。尽管您可以做的是在模式标题中添加一个右对齐的图标，并添加一个 onClick 操作来更改模式的打开状态并关闭它。 *你可以看看这个例子，也许你会更清楚。 您只需导入 LoginButton 即可。 专注于 handleShow export const LoginButton = () => { const [fullscreen, setFullscreen] = useState(true); const [show, setShow] = useState(false); function handleShow(breakpoint) { setShow(breakpoint); setFullscreen(true); } return ( <div> <Button className="me-2 mb-2" onClick={() => handleShow(true)}> Login </Button> <Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} > <Modal.Header className="Modal_Login_header" > <Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title> <Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button> </Modal.Header> <Modal.Body>Modal body content</Modal.Body> </Modal> </div> ) }; CSS： .Modal_Login{ display: flex; flex-direction:row; } .Modal_Login_header{ display: flex; flex-direction:row; justify-content: flex-end; } 简单来说，您无法使用 react-bootstrap 更改图标或颜色。因为图标是由来自 SVG 的标签 CSS 创建的，其中属性 --bs-btn-close-bg 是图标本身。 所以，我认为它在 CSS 文件中创建自定义标签的唯一方法，如下所示： .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'> <path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l- 6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0- 1.414z'/> </svg> ") !important; } 要更改图标，请修改标签 path 和为您提供首选图标的属性 viewbox。 并放置 !important 来接受这个 attribute 无论需要什么，FontAwesome 都可以使用您想要的任何图标的 SVG（我谈论的是免费的）： .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 448 512" fill='white'> <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0- 45.3s-32.8-12.5-45.3 0l-160 160z"/> </svg> ") !important; } 或者如果你想改变颜色改变属性fill='whatever you want'，你可以使用rgba，rgb，#code-color。 fill="rgb(13 110 253)" //or fill="#84b6f4" //or fill="rgba(0, 255, 25, 0.8)" 这个例子是纯 HTML 和 CSS，但逻辑是相同的，因为这里唯一重要的东西来自 App.css 或你的 file.css .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/></svg>") !important } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <!-- Button trigger modal --> <div class="text-center"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>

React-Bootstrap-Typeahead：清除菜单选择

在我的 React-Bootstrap-Typeahead 中，我需要设置一个状态变量并立即清除输入以允许新的搜索。现在发生的事情是： 提出建议清单 当我选择菜单时...

使用导航层叠菜单

我有一个菜单，大致定义如下： 从“反应”导入{组件}； 从“react-bootstrap”导入 { Nav, Navbar, NavDropdown }; 导出默认类 App 扩展 Compon...

react map() 函数上的可折叠按钮面临问题

我使用map()函数创建了多个可折叠的div。但是当我单击一项展开时，其他项也会展开。和崩溃一样。有什么解决办法吗？ 我尝试了这个代码，但它不适用于...

如何在移动视口上隐藏material-ui中的标签文本？

我正在努力修复 React 中侧边栏组件的一些响应式设计问题，其中一个问题是选项卡上的标签文本在较小的屏幕上会变得很糟糕。我想要...

react-responsive-carousel 在移动视图中其下方有不需要的空白

我正在使用react-responsive-carousel，当我切换到移动视图时，下面有一堆空白。我已经尝试了所有我能想到的方法来删除它，包括 body { Overflow-x: hidd...

如何解决 Forbidden (403) React.js 框架？

我在我的项目中使用React.js框架，只有当我尝试更新数据时一切都很好，总是看到Forbidden（403）。

基于React Bootstrap的组合框

我正在开发一个使用React UI Combo Box的项目，但是，React UI不支持React 18。 我已经审查了 Headless UI 和其他开源项目，但我担心它们可能会成为

导航栏，其间有垂直的列和分隔线

我正在使用React-bootstrap，我正在尝试做导航下拉菜单，并且其中的项目不像表格或网格那样工作。 我正在使用 React-bootstrap，我正在尝试执行导航下拉菜单，并且其中的项目不像表格或网格那样工作。 <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Logo</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="">item1</Nav.Link> <Nav.Link href="">item2</Nav.Link> <Nav.Link href="">item3</Nav.Link> <Nav.Link href="">item4</Nav.Link> <Nav.Link href="">item5</Nav.Link> <NavDropdown menuRole="table" title="item6"> // I tried any menuRole like grid or any and nothing works <NavDropdown.Header>item6</NavDropdown.Header> <NavDropdown.Item href="">item6.1</NavDropdown.Item> <NavDropdown.Divider/> // and i don't know how to make it vertical. <NavDropdown.Header>item7</NavDropdown.Header> <NavDropdown.Item href="">item7.1</NavDropdown.Item> </NavDropdown> </Navbar.Collapse> </Navbar> 我不知道如何做分隔符垂直反应引导。感谢您的帮助 你可以用这个，不好但也不错 <Nav.Link disabled >|</Nav.Link>