React Bootstrap 堆叠

堆栈是在 flexbox 属性之上创建的简写辅助工具，使元素布局更快更轻松。

它提供了一种简单的方法来应用多个 flexbox 属性，以使用 Bootstrap 创建所需的布局。堆栈的概念和实现基于开源 Pylon Project。

堆栈有两种类型：垂直和水平。

要使用 Stack 组件，请将其定义为传统组件 <Stack></Stack> 并按如下方式导入它

垂直

默认情况下，堆栈是垂直的并且是全宽的。 在 React Bootstrap 中，<Stack></Stack> 组件用于定义堆栈。 gap 属性定义项目之间的空间。 在传统的 Bootstrap 中，我们使用 .vstack 和 .gap 类来定义堆栈和堆栈之间的间隙。

考虑下面的 Stack 示例

App.js

输出

水平

direction 属性与 Stack 组件一起使用以定义 Stack 的方向。 对于水平定位堆栈，请使用 direction="horizontal" 值。 它将水平对齐布局。 水平堆栈根据内容采用必要的宽度。 gap 属性用于定义布局之间的空间。

考虑下面的示例

App.js

输出

我们还可以使用边距实用程序，例如 ms-auto 和 me-auto 来对齐布局。

考虑下面的示例

App.js

输出

要从右侧添加边距，请使用 me-auto 类。

App.js

输出

如果您使用的是 Bootstrap 4，则可以使用 ml-auto 和 mr-auto。

让我们了解更多示例

React Bootstrap 堆栈示例

使用堆栈定位按钮

堆栈对于定位按钮也很有用。 要垂直对齐按钮，我们可以使用垂直堆栈。

考虑下面的示例

App.js

输出

要水平对齐按钮，我们可以将 direction="horizontal" 属性与 Stack 组件一起使用。

App.js

输出

使用堆栈的表单

我们可以使用堆栈定位表单元素。

内联表单

让我们使用 Form 和 Button 组件创建一个内联表单。 我们将使用 Stack 组件对齐表单元素。

App.js

输出

具有多个字段的表单

我们还可以使用 Stack 组件定位具有多个字段的表单元素。

考虑下面的示例

输出

在这里，我们讨论了 Stack 组件的几个示例。 我们可以使用 Stack 组件轻松对齐不同的组件。