행에서 12개 이상의 열에 대해 Bootstrap의 열 부동 동작을 재정의하는 방법은 무엇입니까?

무제한 열 수에 대한 Bootstrap의 열 부동 동작 재정의

Bootstrap 3은 연속 최대 열 수를 12개로 제한하지만 때로는 더 많이 사용해야합니다. 기본적으로 너비가 12단위인 열(col-xs-12, col-sm-12 등)은 부동하지 않으므로 동일한 행에 있는 다른 부동 열을 방해할 수 있습니다.

주소를 지정하려면 이 경우 재정의 클래스를 적용하여 원하는 수의 열이 올바르게 부동되도록 할 수 있습니다.

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@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의 디자인 원칙을 우회하는 것은 일반적으로 권장되지 않지만 이 재정의를 사용하면 콘텐츠가 풍부한 레이아웃을 만드는 데 더 큰 유연성이 허용됩니다.

위 내용은 행에서 12개 이상의 열에 대해 Bootstrap의 열 부동 동작을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!