Twitter Bootstrap에서 양식을 작성하고 있지만 양식의 입력 아래 버튼을 가운데에 배치하는 데 문제가 있습니다. 이미 center-block버튼에 클래스를 적용하려고 시도했지만 작동하지 않았습니다. 이 문제를 어떻게 해결해야합니까?
여기 내 코드가 있습니다.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>답변:
"text-center"클래스로 단추를 div로 감 쌉니다.
이것을 변경하십시오 :
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>이에:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>편집하다
현재 BootstrapV4 , center-block떨어졌다 # 19102를 찬성m-*-auto
트위터 부트 스트랩 문서에 따르면 : http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>모든 클래스 center-block는 요소에 0 여백을 갖도록 지시하고, 자동은 왼쪽 / 오른쪽 여백입니다. 그러나 클래스 text-center 또는 css text-align : center; 이 부모에 설정되어 있으면 요소가이 자동 계산을 수행 할 지점을 알지 못하므로 예상대로 중앙에 위치하지 않습니다.
https://jsfiddle.net/Seany84/2j9pxt1z/ 위의 코드 예를 참조하십시오.
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>여백을 주거나 해당 요소를 절대적으로 배치하면됩니다.
예를 들어
.button{
margin:0px auto; //it will center them
}0px는 위와 아래에 있고 auto는 왼쪽과 오른쪽에 있습니다.
다음 코드를 시도해 보았습니다.
<button class="btn btn-default center-block" type="submit">Button</button>버튼 컨트롤은 div에 있으며 센터 블록 클래스의 부트 스트랩을 사용하여 버튼을 div의 중심에 정렬하는 데 도움이되었습니다.
센터 블록 클래스를 찾을 수있는 링크를 확인하십시오
부트 스트랩 4 업데이트 :
'd-flex'및 'justify-content-center'유틸리티 클래스로 div 세트로 버튼을 감싸면 flexbox를 활용할 수 있습니다.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>flexbox를 사용하면 동일한 축에 별도의 정렬로 요소 / 버튼을 추가 할 수 있다는 이점이 있습니다. 또한 'align-items-start / center / end'클래스와의 수직 정렬 가능성을 열어줍니다.
레이블과 버튼을 다른 div로 감싸서 서로 정렬되도록 할 수 있습니다.
그것은 독립적으로 만들고 <div>그 안에 넣는 것을 button시도합니다. 이처럼 :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>그런 다음 CSS스타일 페이지로 이동하여 다음 과 Text-align:center같이하십시오.
#contactBtn{text-align: center;}부트 스트랩 3
공간을 열로 나누고 8 개의 작은 열 (col-xs-8)을 사용하고 4 개의 빈 열 (col-xs-offset-4)을 남겨두고 속성 (가운데 블록)을 적용합니다
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>부트 스트랩 4
우리는 Spacing을 사용합니다. Bootstrap은 요소의 모양을 수정하기 위해 광범위한 약식 및 패딩 된 응답 마진 유틸리티 클래스를 포함합니다. xs의 경우 {property} {sides}-{size} 형식, sm, md, lg 및 xl의 경우 {property} {sides}-{breakpoint}-{size} 형식으로 클래스 이름이 지정됩니다.
자세한 정보는 여기 : https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>