Forum : Bootstrap colones

Réponse acceptée

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>

betaWeb

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

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

Auteur

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

Azorgh

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

Auteur

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

betaWeb

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

<div class="col-xs-12">
  <!-- le contenu de la ligne -->
</div>

Yubo

Auteur

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

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

Yubo

Auteur

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

betaWeb

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

Yubo

Auteur

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

Yubo

Auteur

merci! tu gères de la fougèrre

betaWeb

Pas de quoi :)

N'hésites pas à fouiner dans la doc de Bootstrap c'est pas mal expliqué.
Sinon regarde ce tuto, tu comprendra mieux le système de grille CSS: http://www.grafikart.fr/tutoriels/html-css/grille-responsive-css-498/ ;)

Yubo

Auteur

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

Bootstrap colones

15 réponses