Bonjour à tous,

j'ai voulu me mettre au fameux Boostrap 3 mais après 15 minutes d'utilisation je n'arrive déjà pas à faire quelque chose de plutôt simple...

Je cherche à faire ce layout simple:

Comme vous pouvez le voir sur ce dessin magnifique, la colonne de droite ne comporte pas autant de contenu que la colonne de gauche, mais elle fait pourtant la même hauteur.

Cependant, avec Bootstrap 3 et son fonctionnement en "row" ma colonne de droite ne fait que la taille relative à son contenu:

J'ai cherché dans la doc après une class permettant d'adapter la hauteur mais je n'ai rien trouvé.

Existe-t-il une solution simple, un classe que je n'ai pas vu ou une astuce, ou dois-je déjà, après seulement 15 minutes d'utilisation (et une heure de recherche...), aller farfouiller dans le code de bootstrap?

Merci à vous.

Salut,

Non, malheureusement Bootstrap ne permet pas d'harmoniser les hauteurs des blocs directement (mais Foundation le permet).

Si tu veux le faire manuellement, 2 solutions :

- Un coup de JS : tu récupère au runtime la hauteur de tes deux boxs. Tu garde la plus grande des deux, et tu appliques à la seconde (ou plus) cette hauteur.

- Un coup de CSS : http://css-tricks.com/fluid-width-equal-height-columns/

Merci Caletlog, décidément plus j'essaye d'utiliser bootstrap et moins j'ai l'impression d'en comprendre le but.

De façon générale, j'ai l'habitude d'utiliser un reset.css et d'intégrer de manière précise un design fait sous photoshop.

Ici avec Bootstrap je passe mon temps à réécrire tout ce que le framework applique par défaut: les h1-h6 ont des paddings et des margins, les ul ont des margin, une police (helvetica) est appliquée sur plusieurs éléments, ...

J'étais intéressé par Bootstrap pour son côté responsive que je trouve génial et très pratique mais j'avoue suis un peu refroidit par le reste...
Pour le moment j'ai plus l'impression que ce framework est utile pour ses éléments tout fait (les navbar, les formulaires, les bouttons) mais qu'il faut chipoter pour intégrer un design précis. Je suis à côté de la plaque ou c'est bien le cas?

Je vais voir du côté de Foundation que je ne connaissais pas non plus mais qui m'a plus l'air d'être une grille responsive. J'espère cette fois ci ne pas me tromper

Foundation le gère en JS.
Y'a pas vraiment de solution propre en full-CSS, effectivement.

D'accord, je vais encore creuser Bootstrap 3 alors.

Mais je trouve ça vraiment étrange que le framework applique automatiquement des margin, padding voire carrément une font (!) sur certaines balises, c'est pas vraiment pratique de devoir tout réécrire pour intégrer un design. J'en vois même pas l'intérêt en fait

Pour le coup, je trouve que reset.css était beaucoup plus pratique. Là, je suis sans cesse entrain d'utiliser firebug pour vérifier le style des balises

Un simple table-cell permet d'arriver au résultat souhaité ( http://jsfiddle.net/2evteo7e/ )

L'intérêt de Boostrap c'est que le Responsive est quasiment instantané et que toutes les séparations horizontales entre tes blocs sont déjà faites. Il ne te reste plus qu'à faire un petit CSS pour gérer la disposition verticale.

Non, ça c'est l'intérêt d'un framework de grilles.
Bootstrap c'est un petit peu plus que ça quand même, sinon ça fait lourd le système de grille à 100ko+ css et la même en JS

Mais alors quel est l'intéret de Bootstrap vdd?

Avoir des jolis boutons et des formulaires déjà flats