Bootstrap 3의 12열 제한을 연속으로 재정의하는 방법은 무엇입니까?

Bootstrap 3: 행의 열 제한 해결

Bootstrap 3의 기본 동작은 행의 열 수를 12개로 제한하므로 다음과 같은 경우 문제가 발생합니다. 이 한도를 초과하려고 합니다. 이는 여러 콘텐츠 블록을 동적으로 추가하여 원치 않는 중복이 발생할 때 발생할 수 있습니다.

Bootstrap 동작 재정의

이 제약 조건을 해결하기 위해 사용자 정의 클래스를 생성하여 재정의할 수 있습니다. Bootstrap의 기본 동작이며 한 행에 12개 이상의 열을 허용합니다. 이 클래스는 .row 컨테이너에 적용될 수 있습니다.

응답성 고려 사항

한 행에 12개 이상의 열이 허용되지만 응답성을 고려하는 것이 중요합니다. Bootstrap은 열 줄바꿈을 활용하여 열이 다양한 화면 크기에 걸쳐 정렬된 상태를 유지하도록 합니다.

예제 코드

다음 코드는 사용자 정의 클래스의 구현을 보여줍니다. 연속으로 12개 단위를 초과하는 경우:

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}</code>

마크업 예

다음 마크업은 사용자 정의 클래스의 사용법을 보여줍니다.

<code class="html"><div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
  </div>
</div></code>

이점

이 접근 방식을 사용하면 다음이 제공됩니다.

• 다양한 콘텐츠 레이아웃을 수용할 수 있는 유연성.
• 다양한 화면 크기에 동적으로 조정되는 향상된 응답성 .

위 내용은 Bootstrap 3의 12열 제한을 연속으로 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!