홈>
매우 간단한 목표를 달성하고자합니다. 줄에 텍스트를 왼쪽에 맞추고 버튼을 오른쪽에 있습니다. 그리고 텍스트를 단추 레이블에 세로로 정렬하고 싶습니다. 패딩, 여백을 가지고 놀려고했지만 아무것도 효과가 없었습니다. 간단하고 현명한 해결책이 있다고 생각합니다.
플랭커 데모 :
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
관련 자료
- css - 부트 스트랩 4 - 왼쪽에 하나의 버튼을 정렬하고 오른쪽에 나머지 요소를 정렬하는 방법은 무엇입니까?
- javascript - 사각형 버튼 중앙 이미지
- javascript - 부트 스트랩"x"검색 지우기 버튼이 가장자리에서 작동하지 않습니다
- ios - 장면에 버튼과 레이블을 추가하는 방법
- reactjs - 반응 부트 스트랩 버튼 onClick 기능을 인식하지 못합니다
- 모바일 축소를 중심으로하지 않고 부트 스트랩 4 중심 탐색 모음 요소
- html - 부트 스트랩 4 - 인라인 폼 버튼 높이
- css - 반응 부트 스트랩 버튼 애니메이션이 작동하지 않고 버튼이 중앙에 위치하지 않습니다
- css - React Bootstrap으로 버튼 오버레이 이미지를 가운데에 배치하는 방법은 무엇입니까?
- android - 반응 네이티브에서 버튼 텍스트가 세로 중앙에 정렬되지 않음
- css - 부트 스트랩 4의 정렬 된 중첩 버튼 그룹
- 버튼 이름이있는 앵귤러 7에서 부트 스트랩 모달 양식을 여는 방법
- jquery - 라디오 버튼 부트 스트랩에서 가치를 얻는 방법
- 스위프트를 사용하여 버튼으로 레이블에 텍스트를 추가하는 방법
- css - 라디오 버튼으로 레이블 텍스트를 정렬하는 방법
- php - 버튼이 없습니다 - cakephp의 부트 스트랩
- codenameone - 라벨을 중앙으로 이동하는 방법
- javascript - 버튼 클릭시 중심을 중심으로 큐브 회전
- android - 중앙에없는 부동 작업 버튼 아이콘
- javascript - 부트 스트랩 모델을 여는 첫 번째 버튼 만 while 루프에서 작동
관련 질문
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 부트 스트랩 4를 사용하여 링크 디스플레이 내에서 div를 인라인으로 만드시겠습니까?
- html : 하나의 항목이 더 큰 부트스트랩 반응형 그리드
- html : ng-bootstrap/BS5 베타 문서가 있습니까?
- html : 하나의 div 행 부트 스트랩 5에 여러 svg 배치
- html : Bootstrap의 전체 보기 페이지에서 navbar와 콘텐츠를 늘리는 방법은 무엇입니까?
- html : d-none 부트스트랩으로 요소를 사라지게 하여 줄 바꿈 방지
- html : 화면 크기를 조정할 때 부트 스트랩 4 열이 겹칩니다.
- html : 호버 링크에서 부트 스트랩 탐색 모음의 색상을 변경 하시겠습니까?
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
Bootstrap 4는 flexbox를 기반으로하기 때문에 이미 이러한 정렬 유틸리티를 적용하기위한 클래스가 있습니다. 와이즈 비즈 컨테이너를 플렉스 컨테이너로 만들고
d-flex수직 정렬을 수행합니다. 다음과 같이 해보십시오 :<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>