부트스트랩으로 7열 레이아웃을 만들 수 있나요?

Bootstrap을 사용하여 7개의 동일한 열을 만드는 것이 가능합니까?

Bootstrap을 사용할 때 균형 잡힌 레이아웃을 위해 짝수 열을 만드는 것이 일반적입니다. 그러나 7과 같이 홀수 열이 필요한 상황이 발생할 수 있습니다.

CSS로 열 너비 재정의

Bootstrap은 기본적으로 7열 시스템을 제공하지 않지만 CSS를 사용하여 열 너비를 재정의하면 이를 달성할 수 있습니다.

<code class="css">@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

이 미디어 쿼리는 col-md-1 클래스(col-sm-1 및 col-sm-1 및 col-lg-1;)은 중형 화면 이상인 경우 14.285714285714285714285714285714%입니다. 이렇게 하면 동일한 열 분포가 보장됩니다.

상위 클래스 사용

7개 열을 포함하려면 재정의를 적용하기 위해 7-cols 클래스가 있는 상위 요소가 필요합니다.

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
</div></code>

결론

CSS를 사용하여 열 너비를 재정의하고 상위 요소를 활용하면 Bootstrap을 사용하여 7열 레이아웃을 만들 수 있습니다. 이 접근 방식에는 추가 CSS가 필요하며 가능하면 항상 기본 Bootstrap 그리드 시스템을 준수하는 것이 좋습니다.

위 내용은 부트스트랩으로 7열 레이아웃을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!