부트스트랩에서 버튼 위치를 설정하는 방법

풀-오른쪽, 풀-왼쪽, 텍스트-오른쪽, 텍스트-가운데, 텍스트-왼쪽을 사용하여 부트스트랩에서 버튼 위치를 설정할 수 있습니다.

예:

다음은 각 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>

권장: Bootstrap 입문 튜토리얼

위 내용은 부트스트랩에서 버튼 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!