react-bootstrap 网格布局列渲染为行

Question

我有以下渲染方法，我希望布局中有两列，但得到两行:

  render() {
return (
    <div>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
        <Grid>
            <Row>
                <Col>
                    My Header
                </Col>
            </Row>
            <Row>
                <Col>test</Col><Col>test</Col>
            </Row>
        </Grid>
  </div>
);

我希望事情会像这样呈现:

My header

Col One Col Two

但相反，事情是这样呈现的:

My header

Col One

Col Two

我错过了什么？

Answer 1

您可能没有导入 bootstrap css。退房 this Github 上的问题或 this 上的文档React Bootstrap 页面。

来自 React Bootstrap 网站:

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. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<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"
  />