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

尝试此代码

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

欲了解更多信息： https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

我遇到了同样的问题。我通过添加xs-规范解决了这个问题。不完全确定为什么修复它，所以不能真正详细说明。也许更有经验的人可以。

为了澄清，这是一个代码的工作示例：

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 xs = "5" >test</Col><Col xs = "5" >test</Col>
            </Row>
        </Grid>
  </div>
);

Answer 3

您可能不导入引导CSS。在Github上查看this问题，或者在this页面上查看React Bootstrap的文档。

来自React Bootstrap网站：

由于React-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"
  />

react-bootstrap网格布局列呈现为行

3 个答案: