Reactjs

Question

我正在使用 reactstrap 构建我的网络应用程序。

所以我有 2 个 Jumbotrons 按以下方式对齐：

<Row>
    <Col md='9' id='bigger-block'>
        <Jumbotron>Block 1</Jumbotron>
    </Col>
    <Col md='3' id='smaller-block'>
        <Jumbotron>Block 2</Jumbotron>
    </Col>
</Row>

因此，bigger-block 覆盖了左侧宽度的 70%，smaller-block 覆盖了剩下的 30%对了。

我想实现的是当浏览器的宽度减小时：

smaller-block 应该在 bigger-block
两个块现在都应该有全宽（100% 宽度）。

Answer 1

您应该可以通过向 CSS 添加一些额外的规则来实现此目的。

reactstrap 的网格系统是基于 flexbox 的，因此可以使用 order rule 实现响应式排序。我已经运行使用您问题中更新的标记进行了本地测试，并且能够通过添加以下 CSS 规则重新排序：

CSS:

/* the @media block to only apply if the device width is less than 768px wide. 
This means the following rules will typically only take effect on smaller devices like smartphones. 
You can adjust this px width as per your requirements */

@media (max-width: 768px) { 

    #smaller-block {

        /* the 'order' rule is part of flexbox. 
           We can use it here to cause the 'smaller-block' to be ordered before the 
           'larger-block' when viewed on a smaller device/screen */
        order:-1; 
    }
}

网上有很多介绍媒体查询的有用资源。我发现有用的一些值得注意的是：

Reactjs - 调整大小时排序 div

Reactjs - Ordering div when resized

html

css

reactstrap