> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap 3열에서 추가 패딩을 제거하는 방법은 무엇입니까?

Bootstrap 3열에서 추가 패딩을 제거하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-12-13 07:29:11
원래의
492명이 탐색했습니다.

How to Eliminate Extra Padding in Bootstrap 3 Columns?

Bootstrap 3에서 패딩을 제거하는 방법

당면한 문제는 col-md-* 열의 오른쪽 및 왼쪽 패딩을 제거하는 것과 관련이 있습니다. 부트스트랩 3. 제공된 HTML 코드에는 두 개의 중첩된 열이 포함되어 있지만 결과에는 열 옆에 추가 공백이 포함됩니다. columns.

원하는 출력

추가 공간을 없애고 열을 서로 옆에 배치하는 것이 목표입니다.

해결책

.col-md-12를 상위 컨테이너로 사용하면 문제가 발생합니다. 열의 경우. .col-md-12는 본질적으로 행이 아닌 열이므로 자체 여백과 패딩을 상속합니다. 이 문제를 해결하려면 아래와 같이 .row 클래스 내에서 열을 래핑하는 것이 중요합니다.

<div class="container">
    <div class="row">
        <h2>
로그인 후 복사

추가 옵션

원하는 결과가 다음과 같은 경우 모든 여백과 안쪽 여백을 제거하고 클래스를 추가하여 하위 열에 대해 이러한 스타일을 덮어씁니다.

.nopadding {
padding: 0 !important;
margin: 0 !important;
}
로그인 후 복사

위 내용은 Bootstrap 3열에서 추가 패딩을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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