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

Question

我有一行有 3 列，根据屏幕大小，我希望 xsmall(phones) 屏幕采用以下形式：

[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 下的示例，但我在检查控制台中的实际代码看起来不同。

我在 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 。我不知道我是否使用错误的引导程序或发生了什么事。我正在使用 react-bootstap 3，因为当我尝试更新到他们的 beta npm 时，我一直在下载引导程序 3 而不是引导程序 4

Answer 1

我现在知道为什么了，但我想出了一个解决方法。

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

Answer 2

看起来您在任何地方都没有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)。