Bootstrap colones

Par Yubo, il y a 10 ans


Les bases HTML/CSS

Bonjour, j'aimerais aligner mes col-md les unes en dessous des autres mais je ne sais pas comment m'y prendre.
Voici un petit screen de comment ça rend, j'ai mis des lignes rouge pour montrer l'alignement que sa doit avoir à la fin.

merci de votre aide

15 réponses

betaWeb, il y a 10 ans

Salut,

Il faut utiliser la classe col-*-offset-* afin d'appliquer des marges à tes éléments :

<div class="row"> <div class="col-md-4 col-md-offset-4"> <!-- ici le contenu --> </div> </div>

Pour plus d'infos: http://getbootstrap.com/css/#grid-offsetting ;)

Azorgh, il y a 10 ans

Hello,

Tu peux aussi utiliser

<div class="container"> <!-- div.col-md-12 --> </div>

Afin de centrer tout le site, mais je pense que @betaWeb a répondu à la question ;)

Yubo, il y a 10 ans

Salut, quand j'utilise le col offset, les deux premier élements sont décallé.

Azorgh, il y a 10 ans

Forcément puisque tu as le premier bloc en haut a gauche.
Il faut que tu applique l'offset seulement sur les div qui sont sur la même ligne que ton premier bloc.

Yubo, il y a 10 ans

@PallMallShow, ça je ne pourrais pas le faire, enfin si mais ça me fais rajouter beaucoup de php pour peu...

betaWeb, il y a 10 ans

Ou l'autre solution serait de wrapper chacune de tes lignes :

<div class="col-xs-12"> <!-- le contenu de la ligne --> </div>
Yubo, il y a 10 ans

J'ai résolu le problème avec un peu de css mais j'ai juste un problème avec le premier message x)

Des idées?

betaWeb, il y a 10 ans

A quoi ressemble ta boucle PHP pour générer la vue ?

Yubo, il y a 10 ans

pour le moment, j'ai pas mis de php (à peine), j'ai juste mis 4 messages identiques

betaWeb, il y a 10 ans

Pourquoi ne fais-tu pas simplement col-sm-6 col-sm-offset-3 au lieu de col-sm-6 col-centered ?

Yubo, il y a 10 ans

Car si je met col-sm-6 col-sm-offset-3 ça me rend ça

betaWeb, il y a 10 ans

En gros tu veux deux colonnes: une sidebar et un contenu ? Fais comme ça:

<section class="row"> <aside class="col-xs-12 col-sm-4"> <!-- ici ton premier élément "Inscrit en ..." --> </aside> <article class="col-xs-12 col-sm-8"> <div class="col-xs-12"><!-- ici un "twyt" --></div> <div class="col-xs-12"><!-- ici un "twyt" --></div> <div class="col-xs-12"><!-- ici un "twyt" --></div> <!-- ... --> </article> </section>
Yubo, il y a 10 ans

merci! tu gères de la fougèrre

Yubo, il y a 10 ans

Ouais boostrap je connais bien depuis, j'ai juste encore du mal avec les colones >.<