Bootstrap에서 열 사이에 간격을 어떻게 추가할 수 있나요?

Bootstrap에서 열 사이에 간격 추가

Bootstrap의 그리드 시스템을 사용할 때 열 사이에 공간을 추가해야 할 수도 있습니다. 기본적으로 열은 서로 바로 옆에 배치됩니다. 그러나 간단한 Bootstrap 솔루션을 사용하면 열 사이의 간격을 쉽게 확보할 수 있습니다.

중첩 열

열 사이의 간격을 만들려면 각 열을 중첩 열 내에 래핑할 수 있습니다. . 예를 들어 다음 코드를 고려해보세요.

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

내부 열 크기 조정

이러한 방식으로 열을 래핑하면 Bootstrap은 자동으로 약 10px의 패딩을 내부 열의 왼쪽과 오른쪽. 이렇게 하면 외부 열 사이에 눈에 띄는 공간이 생깁니다.

공간 사용자 정의

열 사이의 공간을 조정하려면 내부 열의 너비를 지정할 수 있습니다. 열. 예를 들어 100px 공간을 원할 경우 내부 열을 다음과 같이 변경합니다.

<div class="col-md-12">

결론

중첩 열 기술을 사용하면 간단하게 추가할 수 있습니다. Bootstrap의 열 사이의 간격. 이는 특정 요소를 강조하거나 시각적으로 더욱 매력적인 레이아웃을 만들고 싶을 때 특히 유용할 수 있습니다.

위 내용은 Bootstrap에서 열 사이에 간격을 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!