如何根据屏幕大小允许多种列大小？

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 

我遵循了responsive grids下的react-bootstrap的示例，但我在inspect控制台中的实际代码看起来有所不同。

我在React应用程序中的代码如下所示：

<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，因为当我试图更新到测试版时npm一直在下载bootstap 3而不是bootstrap 4。

Answer 1

它看起来不像是6 anywhere，而是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>