React Bootstrap Grid Columns垂直显示

Question

我正在使用react bootstrap尝试显示一个简单的2x2网格。这应该很简单，但列和行在所有屏幕尺寸上均垂直显示。应该看起来像这样：

A B
A B

但是看起来像这样：

A
B
A
B

代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './Home.js';
import * as serviceWorker from './serviceWorker';
import CustomNavBar from './CustomNavBar.js';

import { Col, Row, Grid, DropdownButton, Button} from 'react-bootstrap';

const grid = (<div style={{backgroundColor: '#801903', color: '#ffff'}}>
  <Grid>
    <Row sm={12}>
      <Col sm={6}>A</Col>
      <Col sm={6}>B</Col>
    </Row>
    <Row sm={12}>
      <Col sm={6}>A</Col>
      <Col sm={6}>B</Col>
    </Row>
  </Grid>

</div>);

ReactDOM.render(grid, document.getElementById('root'));

serviceWorker.unregister();

输出：

Answer 1

您是否在HTML页面中导入了用于react-bootstrap的CSS？

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