堆叠

基于我们的 flexbox 实用程序构建的简写助手，使组件布局比以往更快更容易。

垂直

堆叠默认情况下是垂直的，堆叠的项目默认情况下是全宽的。使用 gap 属性在项目之间添加间距。

结果

加载中...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function VerticalExample() { return ( <Stack gap={3}> <div className="p-2">First item</div> <div className="p-2">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default VerticalExample;

import Stack from 'react-bootstrap/Stack';

function VerticalExample() {
  return (
    <Stack gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default VerticalExample;

水平

使用 direction="horizontal" 用于水平布局。堆叠的项目默认情况下垂直居中，并且只占用其必要的宽度。使用 gap 属性在项目之间添加间距。

结果

加载中...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalExample;

使用水平边距实用程序，如 .ms-auto 作为间隔符

结果

加载中...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalMarginStartExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2 ms-auto">Second item</div> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalMarginStartExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalMarginStartExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2 ms-auto">Second item</div>
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalMarginStartExample;

以及垂直规则

结果

加载中...

实时编辑器

import Stack from 'react-bootstrap/Stack'; function HorizontalVerticalRulesExample() { return ( <Stack direction="horizontal" gap={3}> <div className="p-2">First item</div> <div className="p-2 ms-auto">Second item</div> <div className="vr" /> <div className="p-2">Third item</div> </Stack> ); } export default HorizontalVerticalRulesExample;

import Stack from 'react-bootstrap/Stack';

function HorizontalVerticalRulesExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <div className="p-2">First item</div>
      <div className="p-2 ms-auto">Second item</div>
      <div className="vr" />
      <div className="p-2">Third item</div>
    </Stack>
  );
}

export default HorizontalVerticalRulesExample;

示例

使用垂直 Stack 堆叠按钮和其他元素

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import Stack from 'react-bootstrap/Stack'; function ButtonsExample() { return ( <Stack gap={2} className="col-md-5 mx-auto"> <Button variant="secondary">Save changes</Button> <Button variant="outline-secondary">Cancel</Button> </Stack> ); } export default ButtonsExample;

import Button from 'react-bootstrap/Button';
import Stack from 'react-bootstrap/Stack';

function ButtonsExample() {
  return (
    <Stack gap={2} className="col-md-5 mx-auto">
      <Button variant="secondary">Save changes</Button>
      <Button variant="outline-secondary">Cancel</Button>
    </Stack>
  );
}

export default ButtonsExample;

使用水平 Stack 创建内联表单

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import Stack from 'react-bootstrap/Stack'; function FormExample() { return ( <Stack direction="horizontal" gap={3}> <Form.Control className="me-auto" placeholder="Add your item here..." /> <Button variant="secondary">Submit</Button> <div className="vr" /> <Button variant="outline-danger">Reset</Button> </Stack> ); } export default FormExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Stack from 'react-bootstrap/Stack';

function FormExample() {
  return (
    <Stack direction="horizontal" gap={3}>
      <Form.Control className="me-auto" placeholder="Add your item here..." />
      <Button variant="secondary">Submit</Button>
      <div className="vr" />
      <Button variant="outline-danger">Reset</Button>
    </Stack>
  );
}

export default FormExample;

API

堆叠