부트스트랩 그리드 시스템이 7개의 동일한 열을 생성할 수 있습니까?

7개의 동일한 열이 있는 Bootstrap의 그리드 시스템

Bootstrap으로 작업할 때 열 개수가 고르지 않은 레이아웃을 만드는 것이 어려울 수 있습니다. 부트스트랩 그리드 시스템은 일반적으로 짝수를 준수하므로 많은 사람들이 7개의 동일한 열을 갖는 것이 가능한지 궁금해합니다.

답은 CSS3 @media 쿼리를 사용하여 열 너비를 재정의하는 데 있습니다. 이를 달성하는 방법은 다음과 같습니다.

1. 컨테이너 클래스 선언: 7개의 열이 상주할 컨테이너 클래스를 만드는 것부터 시작합니다. 예:

   <code class="html"><div class="container">
    ...
   </div></code>

2. 행 및 열 구조 정의: 컨테이너 내에서 원하는 클래스로 행과 7개의 열을 정의합니다.

   <code class="html"><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></code>

3. 열 너비 계산: 열 수(이 경우 7)에 따라 적절한 열 너비를 결정합니다. 너비 공식은 다음과 같습니다.

   Width = 100% / Number of Columns

   따라서 7개 열의 경우 너비는 100% / 7 ≒ 14.2857%입니다.

4. 열 너비 재정의 미디어 쿼리 사용: 기본 열 너비를 재정의하려면 CSS 미디어 쿼리를 사용하여 특정 중단점을 대상으로 합니다. 예:

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

이러한 미디어 쿼리를 포함하면 화면 크기에 따라 열 너비가 조정되도록 할 수 있습니다.

작업 데모:

이 온라인 데모를 방문하여 7개의 동일한 열이 실제로 작동하는 모습을 확인하세요.
[데모 링크]

위 내용은 부트스트랩 그리드 시스템이 7개의 동일한 열을 생성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!