부트스트랩 그리드 열 사이에 추가 공간을 추가하려면 어떻게 해야 합니까?

Bootstrap을 사용하여 그리드 열 사이에 추가 공간 만들기

Bootstrap 그리드 레이아웃에서 열 사이에 추가 여백과 패딩 공간을 추가하면 시각적 매력을 높일 수 있습니다. 귀하의 웹사이트. 수정된 col-md-5 클래스와 함께 왼쪽 당기기 및 오른쪽 당기기를 사용하는 것이 옵션일 수 있지만 과도한 간격이 발생할 수 있습니다.

더 우아한 해결책은 각 열 내에 중첩된 div를 만들고 적용하는 것입니다. 원하는 패딩. 이 접근 방식은 추가 공간을 허용하면서 열 구조를 유지합니다.

코드 구현

다음의 수정된 HTML 코드를 고려하세요.

<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 스타일

원하는 여백과 패딩을 적용하려면 다음 CSS를 추가하세요.

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

이 방법을 구현하면 그리드 열 사이에 추가 공간을 효과적으로 추가할 수 있습니다. 레이아웃의 무결성을 유지합니다.

위 내용은 부트스트랩 그리드 열 사이에 추가 공간을 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!