Reaction-Bootstrap网格布局列呈现为行

本文介绍了Reaction-Bootstrap网格布局列呈现为行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  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网站：

<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网格布局列呈现为行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！