【망비록】【CSS】【Bootstrap4】복수의 버튼을 중앙 맞추기

2415 단어 bootstrap4CSS

쓴 이유


  • 폼의 디자인시에 수평 줄의 복수의 버튼을 배치할 때, 이하와 같은 이미지로, 복수의 버튼을 버튼 그룹으로 하고 싶지는 않지만, 정리해 중앙 맞춤으로 하고 싶어졌다.
  • 빨리 갈 수 있을까 생각했지만, 의외로 고민했기 때문에 잊지 않도록 써 두기로 했다.

  • 결론



    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"/>

    좋은 웹페이지 즐겨찾기