부트 스트랩 크기를 조정하는 방법

부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하는 치수 클래스를 사용할 수 있습니다.

부트 스트랩에서 요소를 크기를 조정하는 방법

Bootstrap은 반응 형 모바일 우선 웹 사이트를 작성하기위한 CSS 프레임 워크입니다. 요소의 너비와 높이를 조정하는 데 사용할 수있는 다양한 치수 클래스를 제공합니다.

요소 폭을 조정하십시오

요소의 너비를 조정하려면 다음 크기 클래스를 사용할 수 있습니다.

• .col- : 그리드 시스템의 12 열 중 하나를 차지하는 요소의 열 너비를 설정합니다. 예를 들어, .col-6 요소가 그리드 시스템의 6 열을 차지하게 만듭니다.
• .w- : 요소의 픽셀 너비를 설정합니다. 예를 들어, .w-50 요소 50 픽셀의 너비를 만듭니다.
• .mw- : 요소의 최대 픽셀 너비를 설정합니다. 예를 들어, .mw-500 요소 500 픽셀의 최대 너비를 만듭니다.

요소 높이를 조정하십시오

요소의 높이를 조정하려면 다음 크기 클래스를 사용할 수 있습니다.

• .h- : 요소의 픽셀 높이를 설정합니다. 예를 들어, .h-50 요소 50 픽셀의 높이를 만듭니다.
• .min-h- : 요소의 최소 픽셀 높이를 설정합니다. 예를 들어, .min-h-50 요소 50 픽셀의 최소 높이를 만듭니다.
• .max-h- : 요소의 최대 픽셀 높이를 설정합니다. 예를 들어, .max-h-500 요소 500 픽셀의 최대 높이를 만듭니다.

예

다음은 부트 스트랩을 사용하여 요소를 크기를 조정하는 방법을 보여주는 예입니다.

 <code class="html"><div class="container"> <div class="row"> <div class="col-6"> <div class="card bg-light p-3">半宽元素</div> </div> <div class="col-6"> <div class="card bg-light p-3 h-100">半宽、全高元素</div> </div> </div> </div></code>

이 예에서 첫 번째 요소는 그리드 시스템의 6 열의 너비를 가지며, 두 번째 요소의 너비는 6 열이지만 높이는 100%입니다.

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