Maison > interface Web > tutoriel CSS > Bootstrap 3 peut-il vraiment avoir plus de 12 colonnes d'affilée ?

Bootstrap 3 peut-il vraiment avoir plus de 12 colonnes d'affilée ?

Barbara Streisand
Libérer: 2024-10-31 15:33:42
original
601 Les gens l'ont consulté

Can Bootstrap 3 Really Have More Than 12 Columns in a Row?

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

L'extrait de code fourni remplace le comportement de Bootstrap 3 pour les grands groupes de colonnes, vous permettant d'utiliser plus de 12 colonnes d'affilée. Cependant, il est important de préciser que Bootstrap ne vous limite pas strictement à 12 colonnes par ligne.

Selon la documentation Bootstrap, vous pouvez avoir plus de 12 colonnes dans une seule ligne. Cependant, si vous dépassez cette limite, les colonnes supplémentaires seront regroupées sur une nouvelle ligne comme une seule unité. Cet « habillage de colonnes » est nécessaire pour maintenir la nature réactive du système de grille.

Pour démontrer ce comportement, considérons l'exemple de code suivant :

<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

Dans cet exemple, il y a 14 colonnes, qui dépassent la limite typique de 12. Cependant, notez que les colonnes s'affichent toujours correctement et s'enroulent sur une nouvelle ligne, conservant ainsi la mise en page réactive.

Par conséquent, les remplacements personnalisés fournis dans le fichier ne sont pas nécessaires. message original. Bootstrap vous permet déjà d'utiliser plus de 12 colonnes d'affilée, à condition de considérer le comportement de « retour à la ligne ».

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal