反应引导布局问题

【问题标题】：React bootstrap layout issue反应引导布局问题
【发布时间】：2021-10-23 08:40:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您必须导入引导 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>
      );
    }

参考资料：

堆栈溢出。 Container、Row、Col - 在 React-Bootstrap 中不起作用。 https://stackoverflow.com/a/60673785/8121551。（2021 年 8 月 22 日访问）。

【讨论】：