Sélection de la langue

Recherche

Redistribution du contenu autour de grilles

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

L'utiliser pour redistribuer et envelopper du contenu qui ne figure pas dans une grille autour et en dessous d'une cellule de grille ( boîte de contenu).

Conception et codage

Utilisation de base

⇄ Options

L'utiliser pour redistribuer du contenu autour d'une grille. Les grilles créent des boîtes de contenu, ce qui est habituellement le résultat voulu.

Apparence

Aucune redistribution (comportement de grille par défaut) :

Flotter (tirer) à gauche

Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles.

Flotter (tirer) à droite

Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles.

Bonne utilisation

Points de conformité :

  • Utilisez .mrgn-*-md pour créer une marge de 15px et pour imiter la même gouttière dans une grille
  • Assurez-vous de toujours appliquer à la fois .mrgn-lft-md et .mrgn-rght-md au contenu qui n'est pas dans une grille lorsqu'il y a des grilles et d'autre chose que des grilles dans la même rangée
    • Cela garantit que la redistribution du contenu autour de la cellule de grille
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Flotter (tirer) à gauche :
 <div class="row">
  <div class="col-md-4 pull-left">
     <div class="well mrgn-bttm-md">
      <p>..</p>
     </div>
  </div>
  <div class="mrgn-lft-md mrgn-rght-md">
   <p>Redistribution de contenu...</p>
  </div>
</div>

// Flotter (tirer) à droite :
<div class="row">
  <div class="col-md-4 pull-right">
     <div class="well mrgn-bttm-md">
      <p>...</p>
     </div>
  </div>
  <div class="mrgn-lft-md mrgn-rght-md">
   <p>Redistribution de contenu...</p>
  </div>
</div>

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)

Date de modification: