React Grid系統等價於Bootstrap的網格系統？

Question

我正在尋找開始設計我的React應用程序樣式。我以前使用過Bootstrap的網格系統，現在正在尋找React網格系統。 React開發人員通常使用哪些應用程序的Grid系統/佈局？

感謝

Answer 1

如果你的目標只是現代的瀏覽器（即那些具有flexbox support），你可能要調查react-flexbox-grid它提供了一組陣營實現了常用的網格的概念，如和Column組件。我已經成功地使用了幾個項目。

此選項避免了在整體UI庫拉，只使用網格部分。

Answer 2

我剛使用的引導，無論是造型直接與引導CSS或通過本react-bootstrap庫。

Answer 3

我不知道你的陣營網格系統，因爲它總是CSS網格系統是什麼意思。但是在我的項目中，我使用react-bootstrap庫，我猜這是你正在尋找的東西。唯一需要注意的是你必須包含bootstrap css文件（例如c.d.n.），除此之外它的工作非常好，並且有很好的文檔。

P.S.如果你想只使用網格系統，你將不得不找到，只有引導電網CSS，然後從庫中導入僅網格組件 - Grid，和Col。

Answer 4

我曾經白手起家電網系統很長一段時間，但過了一段時間我累了加入一些類的，它開始讓我的HTML不可讀。我會建議使用flexbox。這是一個很好的替代品，正在成爲響應式設計的標準。這也是supported by all major browsers這很好。

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>