React Bootstrap 网格系统

React Bootstrap 的网格系统类似于传统的 Bootstrap 网格系统。它包含一系列容器、行和列，以提供布局和设计以及对齐内容。React Bootstrap 网格使用 CSS flexbox 构建，并且具有完全响应性。

让我们了解 React Bootstrap 网格系统的不同组件

容器

容器为网页的内容提供固定宽度。它们旨在居中并水平填充您网站的主要内容。容器用于响应式像素宽度。请考虑以下容器示例

App.js

输出

流体容器

流体容器在所有设备和视口上使用 100% 的宽度。

考虑下面的示例

App.js

输出

我们还可以为流体属性指定断点，例如 sm、md、lg、xl 和 xxl。它将容器设置为 100% 宽度，直到指定的断点。

考虑下面的示例

它将容器宽度设置为仅适用于中等大小的设备。

列

列将指定为一行创建多少列。Bootstrap 网格分为 12 列以获得最大宽度。如果我们指定 col-md-3，则它将指定可用总宽度的 4^th。让我们了解不同的列宽。

自动宽度

当未指定列时，<Col></Col> 组件为可用宽度指定等宽列。请考虑以下示例

App.js

输出

指定列宽

我们可以为具有相邻列的其中一列指定列宽。它将根据指定的属性自动调整列宽。

考虑下面的示例

输出

为多个断点指定列宽

我们可以为多个断点指定列宽，这意味着列将在特定设备上占据多少宽度。它将根据指定的值自动转换列宽

考虑下面的示例

从上面的示例中，当页面缩放到特定设备时，将自动采用所有指定的列宽。

响应式网格

<Col></Col> 组件指定了六个断点（xs、sm、md、lg、xl 和 xxl）的宽度。对于每一列，我们可以指定一行中的列的数量。要提供自动布局，我们可以将属性值设置为 {true}。

考虑下面的示例

我们还可以组合两个断点，根据屏幕大小创建不同的网格。请考虑以下示例

列顺序

Col 断点属性具有比指定列宽更多的选项。我们还可以指定顺序和偏移量以应用偏移和排序效果。

order 属性用于控制内容的视觉顺序。

考虑下面的示例

App.js

输出

设置行中的列宽

我们还可以在行中为不同的断点指定列宽。对于每个断点，包括所有六个（xs、sm、md、lg、xl 和 xxl），我们可以指定将适合特定设备的列宽。

我们还可以使用 auto 属性自动将所有列拟合到它们的自然宽度。

考虑下面的示例

从上面的示例中，它将根据每个断点上指定宽度的列拟合所有列。

注意：当在更大的屏幕上查看时，行列宽将被 Col 宽度覆盖，这些宽度设置在较低的断点上。例如，<Col xs={5} /> 大小将在中等和更大的屏幕上覆盖 <Row md={3} />。