如何根据屏幕尺寸允许多个列大小？

Question

我有一行有3列，根据屏幕大小，我希望在xsmall（手机）屏幕的下列形式：

[A-12]
[B-6][C-6]

以及其他尺寸：

[A-4][B-4][C-4](all in one)

但相反，我得到xs：

[A-12]
[B-6(but it looks like 12?)]
[C-6(but it looks like 12?)]according to outline I drew 

我遵循的例子是react-bootstrap在responsive grids下，但我在inspect console中的实际代码看起来有所不同。

我在React app中的代码如下所示：

<Jumbotron>
<Grid>
<Row>
<Col>
<!--Stuff goes here not important-->
</Col>
<Col>
<!--Stuff goes here not important similar to the row below-->
<Row>
<Col  md={4} sm={4} xs={12}>A</Col>
<Col  md={4} sm={4} xs={6}>B</Col>
<Col  md={4} sm={4} xs={6}>C</Col>
</Row>
<!--Stuff goes here not important similar to above-->
</Col>
</Row>
</Grid>
</Jumbotron>

现在，在检查我的编译代码和react-bootstap时我看到的区别是他们的代码在每个列的html中没有：before和：after。我不知道我是否正在使用bootstrap错误或者是什么。我正在使用react-bootstap 3，因为当我尝试更新到他们的beta npm时，只是继续下载bootstap 3而不是bootstrap 4

Answer 1

看起来你没有任何地方的6，你有12代替：

试试这个：

<Row>
  <Col  md={4} sm={4} xs={12}>A</Col>
  <Col  md={4} sm={4} xs={6}>B</Col>
  <Col  md={4} sm={4} xs={6}>C</Col>
</Row>

每行总共12行，如果超过12行，那么你将获得一个新行。对于A，B和C，在md中，每个都设置为4，这意味着它们将适合一行（4 + 4 + 4 === 12）。对于xs，你将它们都设置为12，这意味着每个部分都将在一个新行上。相反，你想要将A设置为12 - 这将占用整行，并使下一个元素从下一行开始。然后你想要B和C是xs={6}他们将分享行（6 + 6 === 12）。

Answer 2

我现在肯定为什么，但这是一个我想通了的工作。

<Row>
     <Col sm={4} xs={12}>
       <Row>
         <Col xs={12}>A</Col>
       </Row>
    </Col>
    <Col sm={8} xs={12}>
      <Row className="flex-nowrap">
         <Col xs={6}>B</Col>
         <Col xs={6}>C</Col>
       </Row>
    </Col>
</Row>