web-dev-qa-db-fra.com

Meilleure pratique pour une colonne dans une ligne du système de grille bootstrap v3?

J'ai lu sur le système de grille ici: http://getbootstrap.com/css/#grid . Bien que la documentation ne traite pas directement d'un scénario dans lequel il y a une colonne dans une ligne, j'en vois un exemple ici: http://getbootstrap.com/css/#grid-offsetting > troisième ligne l'exemple de code.

Actuellement, j'applique la classe .col-xs-12 à la seule colonne des balises qui la contiennent et elle fonctionne bien dans toutes les dimensions de la fenêtre d'affichage. Cependant, je veux m'assurer qu'il n'y a pas de meilleure façon de faire cela.

Merci!

twitter-bootstraptwitter-bootstrap-3
29
user2788141

Je pense que l'ajout d'un col * -12 sera la meilleure pratique. Toutes les lignes de votre grille agiront de la même manière.

Exemple:

enter image description here

html

<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
            </div>
</div>                      
<div class="container">
            <div class="row" style="background-color:yellow;">
                direct inside a row
            </div>
</div>      
<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
                <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
            </div>
</div>

Comme vous le voyez, le contenu n'est PAS aligné avec les autres lignes lorsque vous n'ajoutez pas de colonne - * - 12 (en raison du remplissage manquant). Toutes les lignes identiques faciliteront les modifications futures.

Vous devrez remarquer que les colonnes col * -12 diffèrent des autres colonnes col_- car elles n'ont pas de flottant, voir: https://github.com/twbs/bootstrap/ issues/10152

26
Bass Jobsen

Eh bien, si vous n’avez qu’un élément et que vous voulez qu’il utilise toute la largeur du conteneur (1170px), vous n’avez probablement pas besoin du tout du tout.

Voir ceci Exemple , consultez le code source de la page elle-même.

Remarquez comment le contenu du dessus n'utilise pas de lignes/colonnes?

  <div class="container">

  ...

  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>

Dans ce cas, les lignes/colonnes ne feraient rien sauf ajouter une marge négative (ligne) et un remplissage (col).

De plus, l'exemple que vous donnez utilise la compensation, et n'est pas de la largeur totale, donc la ligne/col est obligatoire.

10
Alexander Rechsteiner

Je sais qu'il est un peu tard, mais les réponses ci-dessus ne prenaient pas en compte les classes de compensation grid

Vous pouvez centrer une colonne avec quelque chose comme ceci:

<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
0
Typo