标签: react-bootstrap
在 xs 设备上隐藏元素
我确定以前有人问过这个问题，但是我在 StackOverflow 或 React-bootstrap-site 上都找不到答案。
如何在 xs 设备上隐藏元素（例如），例如 xs-hidden？
推荐指数
解决办法
查看次数
如何将数组动态添加到 react-bootstrap 表？
我有一个 React 组件，它将根据来自 Ajax 调用的数据呈现一个表。可能只有一行数据，也可能最多有 N 行（数量不多，但有限制）。
使用react-bootstrap，我将如何根据我从中获得的数据创建一个表this.state.data？
这render是该课程的一些示例代码。我将如何根据数组的长度填充单个单元格？
该数组包含我希望填充的每一行的对象，数据对应于Name和Address以及Age（只是一个示例）。我如何<td>用正确的数量填充's ？它可能是从 1 到 N 的任何地方。
render : function () {
let personArray = []; // Array containing objects that each match the three columns I wish to populate.
for(let i = 0; i < personArray.length; i++){
console.log(personArray[i]); // Prints correctly each object with three value key pairs inside
}
const popoverLeft = (
<Popover id="popover-positioned-left" title="Country …推荐指数
解决办法
查看次数
如何在react-bootstrap中有从右到左的方向？
我想构建从右到左方向的反应 UI。到目前为止，我已经测试了引导className="pull-right"用或手动覆盖CSS属性*{direction:rtl;}，并.float-right:{float:right;}在反应的自举部件。然而，这似乎是一种破碎的方法，因为它不适用于某些元素，例如
失去默认填充和形状的下拉按钮或某些项目仍将具有相对于彼此的先前顺序。
是否有任何具有 RTL 方向的反应框架？换句话说，有 React + Bootstrap 和 Bootstrap + RTL 的框架。有没有像
- 反应 + 引导 + RTL？还是 React + 一些 CSS 框架 + RTL？
我正在考虑使用bootstrap-rtl而不是 bootstrap-react 组件，并用我的 react 组件包装这些 HTML/CSS 组件；然而，boostrap 需要 jQuery 库，我读到了这一点，在考虑这种组合（react + jquery）时需要谨慎。
right-to-left twitter-bootstrap reactjs react-bootstrap semantic-ui-react
推荐指数
解决办法
查看次数
如何在 react-bootstrap 中使用多选下拉菜单
我正在使用react-bootstrap库。这个库有一个名为DropdownButton的模块。所以我能够在下拉列表中显示数据。这是单选数据。
<DropdownButton
bsStyle="success"
title={this.state.addLeadStageSelectTitle}
key={"addleadstageDropDown"}
id={"addleadstageIDAdd"}
onSelect={this.handleSelectLeadStageAdd}
>
{this.state.vtx_sales_lead_status.map(objs => {
return (
<MenuItem eventKey={objs.id}>{objs.name}</MenuItem>
)
}
)}
</DropdownButton>
但我正在尝试使用相同的库创建它多选。
推荐指数
解决办法
查看次数
是的，基于另一个非必填字段的验证
我正在使用 Formik 和 React-bootstrap 在 React 中构建一个表单，我正在使用 Yup 来验证表单。
我有 2 个字段，比如说 FieldA 和 FieldB。FieldA 不是必需的，但如果 FieldA 不为空，则 FieldB 是必需的。
FieldA 是一个文本框，而 FieldB 是多选。我对 FieldB 的验证规则必须是：
FieldA !=='' ? FieldB is required : do nothing
推荐指数
解决办法
查看次数
React-router + react-bootstrap
如何将两者合并以创建垂直菜单？我有一个基本的路由设置(可以工作并作为标准水平菜单呈现):
<div>
<Link className="p5" to='/'>Home</Link>
<Link className="p5" to='/Gallery'>Gallery</Link>
<Link className="p5" to='/Contact'>Contact</Link>
</div>
从react-bootstrap文档中,有一个垂直Nav元素的示例:
function handleSelect(selectedKey) {
alert('selected ' + selectedKey);
}
const navInstance = (
<Nav bsStyle="pills" stacked activeKey={1} onSelect={handleSelect}>
<NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
<NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
<NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>
);
我很困惑如何将它们放在一起？我设法将它们放在一起而不使用react-bootstrap,就像下面的普通引导程序一样,但这违背了使用react-bootstrap的目的.
<ul className="nav nav-pills nav-stacked">
<li className="active"><Link className="p5" to='/'>Home</Link></li>
<li><Link className="p5" to='/Gallery'>Gallery</Link></li>
<li><Link className="p5" to='/Contact'>Contact</Link></li>
</ul>
推荐指数
解决办法
查看次数
如何更改选定的react-bootstrap ToggleButton 的背景颜色？
我正在使用react-bootstrap，并尝试将选定的 <ToggleButton>背景颜色更改为蓝色。
例如：
<ButtonToolbar>
<ToggleButtonGroup
type="radio"
name="options"
value={...}
onChange={...}>
<ToggleButton ... />
<ToggleButton ... />
<ToggleButton ... />
</ToggleButtonGroup>
</ButtonToolbar>
因此，我想要蓝色，而不是下面看到的 M/W/F 的深灰色。我已经尝试了十亿种 CSS 技巧，但就是无法实现。谢谢！
推荐指数
解决办法
查看次数
如何获取 Form.Control - React Bootstrap Date Picker 的值？
我下面有这个日期选择器。如何将用户选择的输入日期值保存在 const 中以便以后使用？如果这个问题是初学者的问题，我很抱歉。
import React from 'react'
import { Form } from 'react-bootstrap';
class BootstrapDate extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Form.Group controlId="duedate">
<Form.Control type="date" name="duedate" placeholder="Due date" />
</Form.Group>
</div>
</div>
</div>
)
}
}
export default BootstrapDate;
推荐指数
解决办法
查看次数
为什么示例中的 Bootstrap 5 中的折叠不起作用？
我尝试使用引导崩溃。我复制了该示例，但单击按钮时没有任何反应。不知道出了什么问题。我认为 js 无法正常工作。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil …推荐指数
解决办法
查看次数
如何在react-bootstrap中将容器居中？
我正在使用react-bootstrap开发一个网站，我有一个容器，其宽度需要更改为60%，并且仍然居中。我更改了宽度，但找不到使容器居中的方法。我怎样才能做到这一点？
这是我的代码：
import {Row, Col, Container, Button} from "react-bootstrap"
import '../CSS/Room.css'
const Room = () => {
return (
<>
<Container fluid>
<Row className="roomfac fontReg">
<Col lg={3} className="text-center">
<img src="./Images/logofridge.png" alt="Logo 1"/>
<h3 className="fontSB">Fridge</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logoAC.png" alt="Logo 2"/>
<h3 className="fontSB">AC</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logowifi2.png" alt="Logo 3"/>
<h3 className="fontSB">Wifi</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logotv.png" alt="Logo 4"/>
<h3 className="fontSB">TV</h3>
</Col>
</Row>
</Container>
</>
)
}
export default Room
这是我的 CSS：
import {Row, Col, Container, Button} …推荐指数
解决办法
查看次数
标签 统计
react-bootstrap ×10
reactjs ×7
css ×3
javascript ×3
html ×2
arrays ×1
containers ×1
formik ×1
react-router ×1
web ×1
yup ×1