React bootstrap 布局问题

Question

我一直在思考 React-bootstrap 的布局。使用 Container、Row 和 Col 尝试了基本布局。您可以访问沙箱 here。

我从 react-bootstrap 文档中了解到，列应该水平放置，而不是相互堆叠。我想要实现的是让这些列水平堆叠。

Answer 1

您必须导入 bootstrap CSS 文件，bootstrap/dist/css/bootstrap.min.css。尝试以下操作：

    import "./styles.css";
    import { Container, Row, Col } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
    
    export default function App() {
      return (
        <div className="App">
          <Container>
            <Row>
              <Col>Col 1 of 4</Col>
              <Col>Col 2 of 4</Col>
              <Col>Col 3 of 4</Col>
              <Col>Col 4 of 4</Col>
            </Row>
          </Container>
        </div>
      );
    }

参考文献：

计算器溢出。容器、行、列 - 在 React-Bootstrap 中不起作用。 。 （2021 年 8 月 22 日访问）。