풀-오른쪽, 풀-왼쪽, 텍스트-오른쪽, 텍스트-가운데, 텍스트-왼쪽을 사용하여 부트스트랩에서 버튼 위치를 설정할 수 있습니다.
예:
다음은 각 li의 버튼을 오른쪽으로 정렬해야 하는 간단한 예입니다.
<ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul>
방법 1:
Bootstrap 3에서는 pull-right 스타일 클래스를 사용하여 다음을 수행할 수 있습니다. align 다음과 같이 요소를 오른쪽으로 정렬합니다.
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css--> <ul> <li>One <button class="btn btn-primary pull-right">test</button></li> <li>Two <button class="btn btn-danger pull-right">test2</button></li> </ul>
다음과 같이 각 li의 높이를 적절하게 조정합니다.
li{line-height:40px; height:40px;}
방법 2:
Bootstrap 3에서는 text-right 스타일 클래스를 오른쪽으로 사용할 수도 있습니다. -다음과 같이 버튼을 정렬합니다.
<div class="row"> <div class="col-xs-12"> <div class="text-right"> <button type="button" class="btn btn-default">Default</button> </div> </div> </div>
방법 3:
Bootstrap 4에서는 다음과 같이 풀-오른쪽 스타일 클래스 이름이 부동 오른쪽 클래스 이름으로 변경되었습니다.
<div class="row"> <div class="col-12">One <input type="button" class="btn float-right" value="test"></div> <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div> </div>
위 내용은 부트스트랩에서 버튼 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!