简介
radium-bootstrap-grid 是一个基于 Bootstrap 的栅格系统，使用 Radium 包装使其支持行内样式的伪类和媒体查询。这个包提供了一些非常方便快速的方法来创建响应式网站布局。
安装
你可以通过 npm 安装 radium-bootstrap-grid，只需运行以下命令：
npm install radium-bootstrap-grid
使用
要使用 radium-bootstrap-grid，你需要导入它并将其包含在你的项目中。以下是如何使用它的简单示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ---- --- - ---- ------------------------
-------- ----- -
------ -
-----------
-----
---- ------ -------
--
------
---- ------ -------
--
------
---- ------ -------
--
------
------
------------
--
-
------ ------- ----以上代码将创建一个基本的三列布局。xs 和 md 属性指定了每个列在不同屏幕尺寸下的宽度。在上面的示例中，每个列在小型设备上占据两个单位，在中型设备上占据四个单位。
Container
Container 组件作为一个容器，用于将行（Row）放置在其中，通常用于将网站内容居中。
<Container>
{/* Rows and Columns */}
</Container>Row
Row 组件作为行，包含 Col 组件。Row 组件必须放置在 Container 内。
<Row> <Col>Column 1</Col> <Col>Column 2</Col> <Col>Column 3</Col> </Row>
Col
Col 组件作为列，必须包含在 Row 组件内。xs、sm、md、lg 和 xl 属性用于指定每个列在不同屏幕尺寸下的宽度。
<Col xs={6} md={4}>
Column
</Col>总结
使用 radium-bootstrap-grid 非常方便快捷地创建响应式网站布局。通过容器（Container）、行（Row）和列（Col）三个主要组件，可以轻松地构建自己的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52690