> 웹 프론트엔드 > 부트스트랩 튜토리얼 > 부트스트랩에서 버튼 위치를 설정하는 방법

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

풀어 주다: 2019-07-27 11:48:55
원래의
8937명이 탐색했습니다.

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

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

예:

다음은 각 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿