react-bootstrap 相关问题

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>

我可以自定义 React-Bootstrap Form Control 输入文本框的文本颜色吗？

我正在尝试使用 React-Bootstrap Form 元素在网站上创建一个表单，但我希望它与网站当前的配色方案相匹配。我能够制作输入的背景颜色...

React-Bootstrap Offcanvas 触发我的导航栏。切换以打开和关闭我的导航栏

我正在使用 React-Bootstrap 开发一个导航栏，其中包含一个购物车图标按钮，该按钮将我的 Offcanvas 显示为迷你购物车（您可以在整个网站上向其添加项目的购物车，而无需...

MUI 组件与 React Bootstrap

我正在使用react js开发一个应用程序。我只是想问问你的意见。同时使用 MUI Component 和 React Bootstrap 是不是多余？

如何使用bootstrap在背景图像中添加线性渐变？

这是一个React应用程序。我想用bootstrap在背景图像上添加0.7的线性渐变。但如何呢？ 如果上述代码有效，请根据您的要求更改线性渐变属性值。 body { background: repeating-linear-gradient( 45deg, /* Кут нахилу смужок */ white, /* Початок білої смужки */ white 1px, /* Кінець білої смужки */ transparent 1px, /* Початок прозорої смужки */ transparent 2px /* Кінець прозорої смужки */ ); }

如何在React-Bootstrap中实现下拉动画？

React-Bootstrap 的原生下拉菜单非常不稳定。我想把它弄平。我发现这个类用于普通的 Bootstrap，我想知道如何将它移植到 React，或者只是完成

React Bootstrap NavDropdownalignRight 不起作用

我正在使用 React Bootstrap 并尝试将 NavBar 菜单向右对齐 我正在使用 React Bootstrap 并尝试将导航栏菜单向右对齐 <Nav className="ml-auto paddingLeft5" alignRight> <NavDropdown title="Account" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/privacySettings">Privacy Settings</NavDropdown.Item> <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item> </NavDropdown> <NavDropdown title="Help" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item> <NavDropdown.Item href="/termsAndConditions">Terms and Conditions</NavDropdown.Item> </NavDropdown> </Nav> 然而这似乎行不通。我正在使用“react-bootstrap”：“^1.0.0-beta.10”，“react-dom”：“^16.8.4”和“bootstrap”：“^4.3.1”。 结果可以在附图中看到。 我无法将菜单向右对齐，任何帮助将不胜感激。 import { Navbar, Nav, NavDropdown } from 'react-bootstrap' <Nav className="ml-auto"> <NavDropdown alignRight title="Profile" 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> </Nav> 使用命令 netstat -ntlp 手动终止端口号，然后使用 kill -9 <port number> 并使用 npm start 启动服务器。 今天再次遇到这个问题并想贡献一下： "react-bootstrap": "^2.4.0" "bootstrap": "^5.1.3" 您可以在 NavDropdown 组件中使用 align="end" 属性 <NavDropdown align="end" title="Dropdown" id="nav-add"> <NavDropdown.Item onClick={() => showAddDialog(true)}>Add</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item onClick={() => showAddImageDialog(true)}>Add Image</NavDropdown.Item> </NavDropdown> 参考： 菜单对齐 你可以在 css 或 boostrap 中做一些事情 使用纯CSS你可以创建这些样式 .custom_nav_link{ align-self: flex-end!important; // or text-align: end !important; } 您也可以直接放入这些类 align-self-end` align-self-sm-end //also works with md, lg 如果您将所有内容添加到导航链接，这会将所有内容向右对齐 这给了你这个 这是新的 html <div> <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link className="custom_nav_link" href="#features">Features</Nav.Link> <Nav.Link className="custom_nav_link" href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" className="custom_nav_link" 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> </Nav> <div className="searchBar-inline"> <div className="input-group md-form form-sm form-1 pl-0"> <div className="input-group-prepend"> <span className="input-group-text purple lighten-3" id="basic-text1" > <MDBIcon className="text-white" icon="search" /> </span> </div> <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" /> </div> </div> <Nav className="ml-auto paddingLeft5"> <NavDropdown title="Account" className="custom_nav_link" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/privacySettings"> Privacy Settings </NavDropdown.Item> <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item> </NavDropdown> <NavDropdown title="Help" className="custom_nav_link" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item> <NavDropdown.Item href="/termsAndConditions"> Terms and Conditions </NavDropdown.Item> </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> </div> 您的导航栏占据了整个宽度，看起来很奇怪。因此，如果您想更改它，只需将容器变小并将其固定或绝对移动到右侧即可。