Comment utiliser plus de 12 colonnes dans une ligne Bootstrap 3 ?

Bootstrap 3 - Utilisation de plus de 12 colonnes d'affilée

Remplacement du comportement flottant pour les colonnes excessives

Dans Bootstrap 3, un div .row est généralement contient 12 colonnes et les colonnes supplémentaires ne sont pas flottantes par défaut. Cela peut entraîner le chevauchement de colonnes plus larges sur des colonnes plus petites.

Pour résoudre ce problème, une classe personnalisée peut être utilisée pour remplacer le comportement flottant des colonnes excessives :

<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>

Pourquoi utiliser plus de 12 colonnes ?

Au départ, utiliser plus de 12 colonnes d'affilée peut sembler contre-intuitif, mais cela sert en réalité à maintenir la réactivité. La documentation Bootstrap indique :

"Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une seule unité, enroulé sur une nouvelle ligne."

Par exemple , avoir 24 colonnes sur une seule ligne donnerait deux lignes de 12 colonnes chacune lorsque la taille de l'écran est réduite.

Exemple d'utilisation

Voici un exemple montrant comment utiliser la classe personnalisée :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!