\'row\' 클래스를 수정하지 않고 Twitter Bootstrap의 행에 상단 여백을 추가하는 방법은 무엇입니까?

Twitter Bootstrap의 행에 상단 여백 추가

Twitter Bootstrap 프레임워크는 반응형 레이아웃을 생성하는 편리한 방법을 제공합니다. 그러나 행 요소에 위쪽 여백을 추가해야 하는 경우가 있을 수 있습니다. 기존 "행" 클래스를 수정하고 싶지만 프레임워크의 핵심 스타일과 충돌이 발생할 수 있으므로 권장되지 않습니다.

해결책:

수정하는 대신 "row" 클래스에 원하는 여백을 추가하는 "top-buffer"라는 새 클래스를 만듭니다. 방법은 다음과 같습니다.

1. CSS 파일에 다음 코드를 추가합니다.

<code class="css">.top-buffer { margin-top: 20px; }</code>

2. "top-buffer" 클래스를 위쪽 여백을 추가하려는 행 요소:

<code class="html"><div class="row top-buffer">
    ...
</div></code>

별도의 클래스를 생성하면 다른 상황에 대해 "행" 클래스의 기본 동작을 유지하면서 특정 행을 대상으로 지정할 수 있습니다. 이 접근 방식을 사용하면 Bootstrap 프레임워크의 무결성을 유지하면서 필요에 따라 레이아웃을 사용자 정의할 수 있습니다.

위 내용은 \'row\' 클래스를 수정하지 않고 Twitter Bootstrap의 행에 상단 여백을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!