>

매우 간단한 목표를 달성하고자합니다. 줄에 텍스트를 왼쪽에 맞추고 버튼을 오른쪽에 있습니다. 그리고 텍스트를 단추 레이블에 세로로 정렬하고 싶습니다. 패딩, 여백을 가지고 놀려고했지만 아무것도 효과가 없었습니다. 간단하고 현명한 해결책이 있다고 생각합니다.

플랭커 데모 :

https://plnkr.co/edit/KwRF2uOmKc3aPFQW9DXn?p= 미리보기

<div>
    <span>
        This text should match the "Submit" text
    </span>
    <button type="button" class="btn btn-secondary float-right">Submit</button>
</div>

답변 감사합니다.

  • 답변 # 1

    Bootstrap 4는 flexbox를 기반으로하기 때문에 이미 이러한 정렬 유틸리티를 적용하기위한 클래스가 있습니다. 와이즈 비즈  컨테이너를 플렉스 컨테이너로 만들고 d-flex  수직 정렬을 수행합니다. 다음과 같이 해보십시오 :

    align-items-center
    
    

    <div class="d-flex align-items-center"> <span> This text should match the "Submit" text </span> <button type="button" class="btn btn-secondary ml-auto">Submit</button> </div>

관련 자료

  • 이전 compilation - 파이썬 프로젝트에서 단일 실행 파일 만들기
  • 다음 excel - VBA에서 시작할 때 파이썬 모듈 가져 오기