> 웹 프론트엔드 > CSS 튜토리얼 > 행에서 12개 이상의 열에 대해 Bootstrap의 열 부동 동작을 재정의하는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-11-01 00:16:02
원래의
741명이 탐색했습니다.

How to Override Bootstrap's Column Float Behavior for More than 12 Columns in a Row?

무제한 열 수에 대한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿