【망비록】【CSS】【Bootstrap4】복수의 버튼을 중앙 맞추기
쓴 이유
결론
See the Pen Bootstrap4: Centering buttons not Button-Group by Yui Nishimura ( @yui728 )
on CodePen.
해설
20행: <div class="form-group row justify-content-center">
form-group
: 양식의 요소 그룹화row
: 그리드 레이아웃의 행justify-content-center
: flexbox 레이아웃에서 컨테이너 내부의 요소를 가운데에 맞추기
21행: <div>
- 위에서 언급 한
justify-content-center
에서 중앙 정렬 요소
22행, 23행: <input type="submit"... /> , <input type="button"... />
- 가운데 맞춤 버튼
왜 <div class="form-group row justify-content-center"> 바로 아래에서 <div> 로 또 한 단계 정리해야 하는가?
공식 문서의 Flex: Justify content 를 보면(듯이), justify-content-center
로 중앙 정렬로 했을 경우는, 바로 아래 컨테이너간의 margin 가 무시되기 (위해)때문에.
CodePen으로 실험하면, 확실히 2개의 버튼끼리가 붙은 상태가 된다.
See the Pen Bootstrap4: Centering buttons not Button-Group: if Div directly below Div with "row justify-content-center" class attribute is nothing by Yui Nishimura ( @yui728 )
on CodePen.
<script async=""src="https://production-assets.codepen.io/assets/embed/ei.js"/>
Reference
이 문제에 관하여(【망비록】【CSS】【Bootstrap4】복수의 버튼을 중앙 맞추기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/y_nishimura/items/26fb234a141a5e29d1b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)