12열 제한을 넘어 부트스트랩 3행을 확장하는 방법은 무엇입니까?

행의 12열 제한을 깨기 위해 Bootstrap 3 사용자 정의

문제

기본적으로 Bootstrap 3에서는 12단위보다 큰 열을 강제로 스택합니다. "float: none" 동작으로 인해 수직으로 발생합니다. 이러한 제한은 여러 콘텐츠 블록이 행에 추가될 수 있는 동적 레이아웃을 방해할 수 있습니다.

해결책

이 제한을 깨려면 사용자 정의 CSS 재정의를 적용하여 Bootstrap의 동작을 재정의하고 행이 이를 수용하도록 허용할 수 있습니다. 열이 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열 제한을 넘어 부트스트랩 3행을 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!