이 게시물에서는 거터 공간이 무엇이며 부트스트랩의 특정 div에 대해 제거할 수 있는 방법에 대해 설명합니다.
Bootstrap의 거터 공간이란 무엇입니까?
여백은 수평 패딩에 의해 생성된 열 사이의 공간 또는 간격입니다. Bootstrap 그리드 시스템에서 반응형 콘텐츠 정렬 및 공간을 지원하는 데 사용됩니다.
주어진 이미지 아래에는 주위에 빨간색 테두리가 있는 행이 표시됩니다. 행 내에는 동일한 그리드 열의 동일한 크기의 div 요소 3개가 존재합니다. 열이 동일하더라도 열 사이에는 여백 공간이 있습니다.
Bootstrap에서 특정 div의 거터 공간을 제거하는 방법은 무엇입니까?
부트스트랩에서 클래스 ' 홈통이 없는 ”는 모든 div의 거터 공간을 제거하는 데 사용됩니다.
이 목적을 위해:
- 추가하다 ' <사업부> ” 클래스와 함께 태그 메인 사업부 '.
- 그런 다음 다른 '를 추가하여 행 섹션을 조정합니다. <사업부> ” 클래스가 있는 요소 열 '. 행에서 공백을 제거해야 하므로 ' 홈통이 없는 ” 그 안에.
- 그리드 행을 3개의 동일한 열로 나누려면 ' 열-4 '.
- 각 열의 '' 컨테이너 내에서 '' 클래스를 사용하여 '' 요소를 조정합니다. 열-1 ”, “ 열-2 ', 그리고 ' 열-3 ”, 각각: < 사업부 수업 = '메인 사업부' >
< 사업부 수업 = '행 거터 없음' >
< 사업부 수업 = '콜-4' >
< 사업부 수업 = '열-1' >< / 사업부 >
< / 사업부 >
< 사업부 수업 = '콜-4' >
< 사업부 수업 = '열-2' >< / 사업부 >
< / 사업부 >
< 사업부 수업 = '콜-4' >
< 사업부 수업 = '열-3' >< / 사업부 >
< / 사업부 >
< / 사업부 >
< / 사업부 >CSS
CSS 섹션에서 HTML 페이지에 언급된 클래스는 여러 스타일 속성으로 스타일이 지정됩니다.
스타일 'main-div' 클래스
.main-div {
너비 : 600픽셀;
여백: 50px 자동;
}“ .main-div ” 클래스가 있는 div 요소에 액세스하기 위해 언급됨 메인 사업부 '. 이 클래스에는 다음 속성이 적용됩니다.
- “ 너비 ' 요소의 너비를 정의합니다.
- “ 여유 ” 요소 주변의 간격을 설정합니다.
스타일 '행' 클래스
.열 {
국경 : 1px 솔리드 레드;
}부트스트랩 ' 열 ” 클래스는 “ 국경 ' 속성. 그러면 지정된 너비, 스타일 및 색상 테두리로 그리드 행이 래핑됩니다.
3개의 클래스 ' 열-1 ”, “ 열-2 ', 그리고 ' 열-3 '에 CSS '가 할당됩니다. 배경색 ' 그리고 ' 키 ” 속성을 눈에 띄게 만듭니다.
스타일 '열-1' 클래스
.열- 하나 {
배경- 색깔 : 청록색;
키 : 200픽셀;
}스타일 '컬럼-2' 클래스
.열- 2 {
배경- 색깔 : 바이올렛;
키 : 200픽셀;
}스타일 '열-3' 클래스
.열- 삼 {
배경- 색깔 : 연두색;
키 : 200픽셀;
}'라는 것을 알 수 있다. <사업부> ” 클래스가 있는 컨테이너 열 ” 사이에 거터 공간 없이 성공적으로 조정되었습니다.
Bootstrap에서 특정 div에 대한 거터 공간을 제거하는 방법을 알려드렸습니다.
결론
특정 div의 거터 공간을 제거하려면 ' 홈통이 없는 '를 사용할 수 있습니다. 이를 위해 ' <사업부> ' 요소와 함께 ' 행 홈통 없음 ' 수업. 이 게시물은 거터 공간에 대한 포괄적인 가이드와 Bootstrap의 특정 div에 대해 거터 공간을 제거할 수 있는 방법을 제공했습니다.