Reaction-Bootstrap网格布局列呈现为行 [英] react-bootstrap grid layout columns rendering as rows

问题描述

我有以下呈现方法，我希望布局中有两列，但实际上得到的是两行：

  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

我错过了什么？

推荐答案

您可能没有导入引导CSS。请查看Github上的this问题或this页上有关Reaction Bootstrap的文档。

来自Reaction Bootstrap网站：

因为Reaction-Bootstrap不依赖于非常精确的Bootstrap版本，所以我们不附带任何附带的CSS。但是，需要一些样式表才能使用这些组件。如何包含以及包含哪些引导样式由您自己决定，但最简单的方法是包含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"
  />

这篇关于Reaction-Bootstrap网格布局列呈现为行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！