Bootstrap 3행에서 12개 이상의 열을 사용하는 방법은 무엇입니까?

Bootstrap 3 - 행에 12개 이상의 열 사용

과도한 열에 대한 부동 소수점 동작 재정의

Bootstrap 3에서는 일반적으로 .row div가 사용됩니다. 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>

12개 이상의 열을 사용하는 이유 ?

처음에는 12개 이상의 열을 연속해서 사용하는 것이 직관에 어긋나는 것처럼 보일 수 있지만 실제로는 응답성을 유지하는 데 목적이 있습니다. Bootstrap 문서에는 다음과 같이 명시되어 있습니다.

"12개 이상의 열이 단일 행 내에 배치되는 경우 추가 열의 각 그룹은 하나의 단위로서 새 줄로 줄 바꿈됩니다."

예를 들어 , 단일 행에 24개 열이 있으면 화면 크기가 줄어들면 각각 12개 열의 두 행이 됩니다.

사용 예

다음은 사용자 정의 클래스 사용 방법을 보여주는 예입니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!