Bootstrap 그리드 레이아웃에서 열 사이에 간격을 추가하는 방법은 무엇입니까?

Bootstrap 그리드 레이아웃에서 열 간격

Bootstrap에서 열 사이에 공간을 만들기 위해 여백이나 패딩을 추가하는 것은 까다로울 수 있습니다. 열 정렬에 영향을 주지 않고 이를 달성하려면 다음 단계를 따르세요.

열 내에 내부 Div 만들기

col-md-6 요소 내에 div를 만들고 적용 원하는 여백과 패딩. 이 div는 필요한 간격을 제공하면서 열의 척추 역할을 합니다.

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

사용자 정의 스타일 추가

CSS에서 원하는 여백과 패딩을 적용합니다.

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

이 접근 방식을 사용하면 부트스트랩 그리드 레이아웃의 무결성을 손상시키지 않고 열 사이의 간격을 쉽게 조정할 수 있습니다.

위 내용은 Bootstrap 그리드 레이아웃에서 열 사이에 간격을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!