Bootstrap에서 7열 그리드 시스템을 만드는 방법은 무엇입니까?

Bootstrap에서 7개의 동일한 열 얻기

도전

Bootstrap의 기본 열 시스템이 12개이므로 7개의 동일한 열을 얻는 것은 어려울 수 있습니다. 열. 다음 코드 조각은 Bootstrap에 내장된 열 클래스를 사용하여 5개의 동일한 열을 생성하려는 시도를 보여줍니다.

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

그러나 이로 인해 원하는 7개가 아닌 5개의 열만 생성됩니다.

사용자 정의 열 너비

이 제한을 극복하려면 CSS3 @media 쿼리를 사용하여 기본 열 너비를 재정의해야 합니다. 원하는 열 수에 따라 열의 너비 속성을 사용자 정의하면 원하는 효과를 얻을 수 있습니다.

코드 구현

다음 코드는 Bootstrap에서 7열 그리드 시스템을 생성하는 방법을 보여줍니다.

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div></code>

7열 클래스가 외부 행에 추가되어 표준 부트스트랩 행과 구별됩니다.

그런 다음 사용자 정의 CSS를 사용하여 각 열의 너비를 결정합니다.

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

@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%;
  }
}

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

너비 값 14.285714285714285714285714285714%는 100%를 7(열 개수)로 나눈 후 열 번호(이 경우 1)를 곱한 값입니다. 이 계산을 통해 모든 열의 너비가 동일해집니다.

사용자 정의 CSS와 7열 클래스를 결합하면 다양한 화면 크기에 적응하는 7개의 동일한 열이 있는 유연한 그리드 시스템을 만들 수 있습니다.

위 내용은 Bootstrap에서 7열 그리드 시스템을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!