행 클래스를 수정하지 않고 Bootstrap에서 행 사이에 수직 간격을 추가하는 방법은 무엇입니까?

Twitter Bootstrap에서 행 사이에 세로 간격 추가

Bootstrap의 행 클래스는 페이지 구조에 필수적입니다. 그러나 행 사이에 추가 상단 여백이 필요한 상황에서는 행 클래스 자체를 수정하는 것은 현명하지 않습니다.

해결책: 사용자 정의 클래스 생성

대신 이 효과를 얻으려면 "top-buffer"와 같은 사용자 정의 클래스를 사용하세요. 이 접근 방식은 핵심 Bootstrap 프레임워크를 방해하지 않으며 필요한 경우에만 위쪽 여백을 추가하는 유연성을 허용합니다.

CSS 선언:

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

HTML 구현 :

상단 여백 간격이 필요한 특정 행에 "top-buffer" 클래스를 적용합니다.

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

이 솔루션은 수직 간격 추가에 대한 보다 명확하고 타겟화된 접근 방식을 제공합니다. Bootstrap 그리드 시스템의 무결성을 유지하면서 행 사이에.

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