in English
스택
구성 요소 레이아웃을 그 어느 때보다 빠르고 쉽게 만들기 위해 flexbox 유틸리티를 기반으로 하는 약식 도우미입니다.
이 페이지에서
스택은 부트스트랩에서 레이아웃을 빠르고 쉽게 생성하기 위해 여러 플렉스박스 속성을 적용하는 지름길을 제공합니다. 개념 및 구현에 대한 모든 크레딧은 오픈 소스 Pylon 프로젝트 에 있습니다.
머리! flexbox가 있는 갭 유틸리티에 대한 지원이 최근 Safari에 추가되었으므로 원하는 브라우저 지원을 확인하는 것이 좋습니다. 그리드 레이아웃에는 문제가 없어야 합니다.
더 읽어보기 .
수직의
.vstack
세로 레이아웃을 만드는 데 사용 합니다. 스택 항목은 기본적으로 전체 너비입니다. .gap-*
유틸리티를 사용 하여 항목 사이에 공간을 추가합니다.
첫 번째 항목
두 번째 항목
세 번째 항목
<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-*
유틸리티를 사용 하여 항목 사이에 공간을 추가합니다.
첫 번째 항목
두 번째 항목
세 번째 항목
<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
스페이서 와 같은 수평 여백 유틸리티 사용 :
첫 번째 항목
두 번째 항목
세 번째 항목
<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>
수직 규칙 :
첫 번째 항목
두 번째 항목
세 번째 항목
<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
버튼 및 기타 요소를 쌓는 데 사용 :
<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
.
<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;
}