스택

구성 요소 레이아웃을 그 어느 때보다 빠르고 쉽게 만들기 위해 당사의 flexbox 유틸리티를 기반으로 하는 속기 도우미입니다.

이 페이지에서

스택은 부트스트랩에서 레이아웃을 빠르고 쉽게 생성하기 위해 여러 플렉스박스 속성을 적용하는 지름길을 제공합니다. 개념 및 구현에 대한 모든 크레딧은 오픈 소스 Pylon 프로젝트 에 있습니다.

머리! flexbox가 있는 갭 유틸리티에 대한 지원이 최근 Safari에 추가되었으므로 원하는 브라우저 지원을 확인하는 것이 좋습니다. 그리드 레이아웃에는 문제가 없어야 합니다. 더 읽어보기 .

수직의

.vstack세로 레이아웃을 만드는 데 사용 합니다. 스택 항목은 기본적으로 전체 너비입니다. .gap-*유틸리티를 사용 하여 항목 사이에 공간을 추가합니다.

첫 번째 항목

두 번째 항목

세 번째 항목

HTML

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

수평의

.hstack가로 레이아웃에 사용 합니다. 쌓인 항목은 기본적으로 세로 중앙에 배치되며 필요한 너비만 차지합니다. .gap-*유틸리티를 사용 하여 항목 사이에 공간을 추가합니다.

첫 번째 항목

두 번째 항목

세 번째 항목

HTML

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

.ms-auto스페이서 와 같은 수평 여백 유틸리티 사용 :

첫 번째 항목

두 번째 항목

세 번째 항목

HTML

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

수직 규칙 :

첫 번째 항목

두 번째 항목

세 번째 항목

HTML

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

예

.vstack버튼 및 기타 요소를 쌓는 데 사용 :

HTML

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

다음을 사용하여 인라인 양식을 작성하십시오 .hstack.

HTML

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

사스

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}