标签: react-bootstrap

我正在使用http://react-bootstrap.github.io/ Carousel 组件。我正在尝试自定义包含一些文本的轮播指示器，并使其看起来像一个带有文本的按钮，但将渲染“ol”标签反应为一个新的 CarouseItem 并且没有重定向功能

    return (
       <Carousel id="sampleSlide" indicators={false}>
          <ol className="carousel-indicators">
            <li data-target='#sampleSlide' data-slide-to="0" className="active"></li>
            <li data-target= '#sampleSlide' data-slide-to="1"></li>
          </ol>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
      </Carousel>
    );

有什么方法可以自定义它或任何其他方法吗？

我有6个按钮,当点击时,激活一个模态.这是用React编写的.

//Since I have 6 different modals, giving each of them an id would distinguish them
onCloseModal(id) {
    this.setState({
        open: false,
        modalShown: id
    })
}

render() {
    return (
        <Modal onHide={this.onCloseModal.bind(this, item.id)} keyboard={true}>
            <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
            </Modal.Header>
        </Modal>
    )
}

我有keyboard={true},根据https://react-bootstrap.github.io/components.html#modals-props的文档,按Escape键将退出模态.但它不起作用.我相信我已经设置了所有内容,因为我的每个按钮都有一个唯一的ID - 为什么逃生键不响应？

这是一个模态的图像.

我正在尝试使用react-bootstrap复选框(https://react-bootstrap.github.io/components.html#forms-controls),我需要在更改状态时触发事件.能够以编程方式取消/检查它和/或判断它是否被检查也是很好的.不幸的是,当代码被转换并呈现​​时,它将输入包装在div中.

我怎样才能在dom中找到它并操纵它？

我的代码看起来类似于:

import React, { PropTypes } from 'react';
import { Checkbox } from 'react-bootstrap';

const EditItem = (props) => {

  return (
    <div>
      <Checkbox style={{ marginLeft: '15px' }} >{props.itemLable}</Checkbox>
    </div>
  );
};

export default EditItem;

浏览器渲染:

...
<div class="checkbox" style="margin-left: 15px;">
  <label>
    <input type="checkbox">
  </label>
</div>
...

我在文档中看到了inputRef prop,但是我找不到任何这样的例子或让它自己工作.

如何使用react-bootstrap设置NavBar应折叠的值？我似乎无法使用我在网上找到的任何东西.

例如,它目前在768px下崩溃,但我希望它在850px下崩溃.

<Navbar inverse collapseOnSelect>
<Navbar.Header>
    <Navbar.Brand>
        <a className='navItem' href="#" id='name_badge'><Link to='/'>asdf</Link></a>
    </Navbar.Brand>
    <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
    <NavItem className='navItem hvr-wobble-skew' eventKey={1} href="#"><Link to='/about'>About</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={2} href="#"><Link to='/projects'>Projects</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/skills'>Skills</Link></NavItem>
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/contact'>Contact</Link></NavItem>
</Nav>
<div className="pullRight">
    <Nav>
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/bla"><FaInstagram size={30}/></Navbar.Link>
        </Navbar.Text> 
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/ad"><FaFacebookSquare size={30}/></Navbar.Link>
        </Navbar.Text> 
        <Navbar.Text>
            <Navbar.Link target='_blank' href="https://www.facebook.com/pages/fd"><FaGithubAlt size={30}/></Navbar.Link>
        </Navbar.Text>                    
    </Nav>
</div>
</Navbar.Collapse>
</Navbar>   

我在React应用程序中使用React-Bootstrap。这导致左侧和右侧的边距。我正在使用以下代码：

import React, { Component } from "react";
import "react-bootstrap/dist/react-bootstrap.min.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { Grid, Row, Col } from "react-bootstrap";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";

<Grid fluid>
   <Row>
      <Col xs={12} md={12}>
        <AppBar title="Title"
         iconClassNameRight="muidocs-icon-navigation-expand-more"/>
       </Col>
   </Row>
   <Row>
       <Col xs={4} md={4}>
          <h1>Hello</h1>
       </Col>
       <Col xs={8} md={8} >
          <h1>Hello World!</h1>
       </Col>
   </Row>
</Grid>

我得到以下输出：

如果我xs and md从中删除，<Col>问题将得到解决。

导入twitter-bootstrap导致此问题。如果我删除了twitter-bootstrap导入，则引导程序样式不起作用。

这个问题与Twitter-Bootstrap的问题相同，但是我无法在React-Bootstrap中修复它。

我知道在react-bootstrap中更改颜色非常困难，但是我希望按钮的颜色不是原色。如何在JS / SCSS中执行此操作？

很抱歉，我缺乏知识，但我是新手，目前正在学习。只想问一下我是否想在我的react应用程序中使用bootstrap 4，是否必须安装JQUERY？我在某处读到，将JQUERY与React一起使用是不行的。所以现在我在想。谢谢回复。您的意见和建议是真正的赞赏。

我正在尝试使用ReactJS创建一个简单的Webapp，我想使用NavbarReact-Bootstrap提供的。

我创建了一个Navigation.js文件，其中包含一个类，Navigation用于将Navbar和和路由与App.js文件分开。但是，这两个部分似乎都不起作用。当我加载页面时，它只是空的，没有导航栏。谁能发现一个错误？

Navigation.js：

import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';

class Navigation extends Component {
    render() {
        return (
            <div>
                <div>
                    <Navbar>
                        <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
                        <Navbar.Collapse>
                            <Nav className="mr-auto">
                                <NavItem eventkey={1} href="/">
                                    <Nav.Link href="/">Home</Nav.Link>
                                </NavItem>
                            </Nav>
                            <Form inline>
                                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                                <Button variant="outline-success">Search</Button>
                            </Form>
                        </Navbar.Collapse>
                    </Navbar> …

我收到此错误我使用 npx-create-react-app 创建了一个新项目，然后按照此处写下的说明进行操作：https : //react-bootstrap.github.io/getting-started/introduction 我已经安装使用：npm install react-bootstrap bootstrap。然后把 CDN 复制到我的 index.html

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
**rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>**
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

然后导入了：

import React from 'react';
import  {Grid}  from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="container">
        <Grid className ="purchase-card">
          <h1>Hello World</h1>
        </Grid>
    </div>
  );
}

export default App;

我已经尝试在 Google 上搜索解决方案和导入的变体（例如，从“react-bootstrap/Button”导入按钮），但我似乎找不到导致此问题的问题。

我有一个带有 react-bootstrap、bootstrap 和 scss 设置的 gatsby 站点，我正在尝试清除未使用的 css。为此，我需要使用 purgeCss，但它在需要时不起作用。它似乎无法捕获我在页面中使用的 react-bootstrap 组件中的类。我阅读了文档，尝试了一些修复，但没有任何效果。有人能帮我吗 ？