スタック

コンポーネントのレイアウトをこれまで以上に簡単かつ迅速に行えるように、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

Stack