Bootstrap에서 열 사이의 여백과 패딩을 제어하는 ​​방법은 무엇입니까?

Bootstrap을 사용하여 열의 여백 및 안쪽 여백 관리

Bootstrap의 그리드 레이아웃을 사용할 때 열 사이의 간격을 조정하는 것이 바람직할 수 있습니다. 이는 추가 여백과 패딩을 통합하여 달성할 수 있습니다.

한 가지 일반적인 접근 방식은 왼쪽으로 당기기 및 오른쪽으로 당기기 기능이 있는 col-md-5와 같은 옵션을 사용하여 열의 클래스를 수정하는 것입니다. 그러나 이 기술을 사용하면 간격이 너무 길어질 수 있습니다.

대체 솔루션은 각 col-md-6 열 내에 중첩된 div 요소를 만드는 것입니다. 열의 백본은 그대로 유지되며 중첩된 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:

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

이 접근 방식을 사용하면 그리드 레이아웃을 손상시키지 않고 열 사이의 간격을 정밀하게 제어할 수 있습니다.

위 내용은 Bootstrap에서 열 사이의 여백과 패딩을 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!