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

我遵循了{-{3}}下react-bootstrap的示例，但是我在检阅控制台中的实际代码看起来有所不同。

我在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，因为当我尝试更新到Beta npm时，只是一直下载bootstrap 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>

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

2 个答案: