为什么 'Col' 在 React bootstrap 中不起作用？

Question

我正在对容器、行、列组件使用 React bootstrap。我的代码不工作，我期待列，但它们像行一样一个接一个地出现。

代码 ->

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function Header() {
  return (
    <Container>
      <Row>
        <Col xs={4} md={4} lg={4} sm={4}>
          First
        </Col>
        <Col xs={4} md={4} lg={4} sm={4}>
          Second
        </Col>
        <Col xs={4} md={4} lg={4} sm={4}>
          Third
        </Col>
      </Row>
    </Container>
  );
}

export default Header;

Answer 1

Stylesheets#

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.

CSS#

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

来源：https://react-bootstrap.github.io/getting-started/introduction

react-bootstrap提供的示例：https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic?file=/src/App.js

为什么 'Col' 在 React bootstrap 中不起作用？

Why 'Col' is not working in React bootstrap?

javascript

css

reactjs

react-bootstrap

bootstrap-4