Bootstrap 그리드 열의 간격을 미세 조정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 그리드 열의 간격을 미세 조정하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-05 11:24:01

원래의

225명이 탐색했습니다.

How to Fine-Tune Spacing in Bootstrap Grid Columns?

부트스트랩 그리드 간격 미세 조정

부트스트랩 그리드 레이아웃에서는 열 사이의 간격 문제에 직면하고 있습니다. 왼쪽으로 당기기 및 오른쪽으로 당기기와 함께 col-md-5를 사용하는 솔루션은 너무 많은 공간을 차지할 수 있지만 보다 미묘한 접근 방식을 사용할 수 있습니다.

해결책: 열 내에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!