Question

我无法让引导程序类与react-bootstrap一起使用

我尝试使用bootstrap类，特别是在react-bootstrap中使用flex属性，但是它似乎不起作用。但是在文档中，它显示了一个使用“ https://react-bootstrap.netlify.com/layout/grid/”的示例，这些文档似乎也很模糊，因此我去了Bootstrap的文档，但那里也没有用。

我注意到，当我更改多少个Col（例如col md = {4}）时，我希望特定的col元素占据此按钮更改的位置，即使该按钮应该位于中间，这又为什么呢？这是我的代码示例

import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';

class Welcome extends React.Component {
  render() {
    return(
      <div className="welcome">
          <Container>
            <Row className="justify-content-center">
              <Col>
                <Button variant="primary" size="lg">Large button</Button>
              </Col>
            </Row>
          </Container>
      </div>
    );
  }
}

export default Welcome;

我对反应也相当陌生，对React-bootstrap来说更是如此，但是我对Bootstrap非常熟悉，这使我准备使用CSS grid或flex而不使用bootstrap的网格大声笑。因此，如果有人可以帮助我，那将是非常棒的事情。

Answer 1

尝试一下。

<Container>
  <Row>
    <Col md={{ order: 'last' }}>First, but last</Col>
    <Col md>Second, but unordered</Col>
    <Col md={{ order: 'first' }}>Third, but first</Col>
  </Row>
</Container>

有没有办法在react-bootstrap中使用引导类？

1 个答案: