Question

我正在寻找我的React应用程序的样式。我以前使用过Bootstrap的Grid系统，现在正在寻找React网格系统。 React开发人员通常会为他们的应用程序的网格系统/布局使用什么？

由于

Answer 1

我刚刚使用过bootstrap，可以直接使用bootstrap css或通过这个react-bootstrap库进行样式化。

Answer 2

我不确定React Grid系统是什么意思，因为它始终是CSS网格系统。但是在我的项目中，我使用的是react-bootstrap库，我猜测它是你正在寻找的东西。唯一需要注意的是，你必须包含bootstrap css文件（例如来自c.d.n.），除此之外它的工作非常好并且有很好的文档。

P.S。如果您只想使用Grid系统，那么您必须仅使用bootstrap Grid找到css，然后仅从库中导入Grid组件 - <img src="{{ comment.created_by.userprofile.user_avatar.url }}">，Grid和Row。< / p>

Answer 3

我使用bootstraps网格系统很长一段时间，但过了一段时间我厌倦了添加一堆类，它开始让我的HTML不可读。我建议使用flexbox。它是一个很好的替代品，正在成为响应式设计的标准。它也是supported by all major browsers很好。

Answer 4

如果您只定位现代浏览器（即flexbox support的那些浏览器），您可能需要调查react-flexbox-grid，它提供了一组实现常规网格概念的React组件，如Row和Column。我在几个项目中成功使用过。

此选项可以避免拉入整个UI库并仅使用网格部分。

Answer 5

看看我建造的fluid-react。它不需要额外的CSS。

<Container>
    <Row>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col>
    </Row>
</Container>

React Grid System相当于Bootstrap的网格系统？

5 个答案: