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