Maison > interface Web > tutoriel CSS > le corps du texte

Comment remplacer le comportement flottant des colonnes de Bootstrap pour plus de 12 colonnes consécutives ?

DDD
Libérer: 2024-11-01 00:16:02
original
724 Les gens l'ont consulté

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

Remplacer le comportement flottant des colonnes de Bootstrap pour un nombre de colonnes illimité

Bootstrap 3 impose un nombre maximum de colonnes de 12 d'affilée, mais parfois vous pouvez il faut en utiliser davantage. Par défaut, les colonnes d'une largeur de 12 unités (col-xs-12, col-sm-12, etc.) ne flottent pas, ce qui peut interférer avec les autres colonnes flottantes de la même ligne.

À adresser Ceci, une classe de remplacement peut être appliquée pour permettre à n'importe quel nombre de colonnes de flotter correctement.

<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>
Copier après la connexion

Ce remplacement garantit que toutes les colonnes des lignes avec la classe "grand groupe" flotteront, quelle que soit leur largeur. .

Exemple d'utilisation :

<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>
Copier après la connexion

Bien qu'il ne soit généralement pas recommandé de contourner les principes de conception de Bootstrap, cette substitution permet une plus grande flexibilité dans la création de mises en page riches en contenu.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal