1486 sujets

Web Mobile et responsive web design

Site bootstrap et réorganisation de colonne

Bonjour,
je travaille sur la création d'un site en Bootstrap et j'ai un soucis de grille.
J'ai décidé d'afficher mes blocs de contenu dans une grille de 3 colonnes par ligne

<div class="container">
<div class="row">
<h2 class="fontcolor-regular">titre 1</h2>
<div class="col-md-4 infoblock">contenu 1</div>
<div class="col-md-4 infoblock">contenu 2</div>
<div class="col-md-4 infoblock">contenu 3</div>
<div class="col-md-4 infoblock">contenu 4</div>
<div class="col-md-4 infoblock">contenu 5</div>
</div>
</div>

Rien de bien méchant...
les contenus 1, 2 et 3 sont donc sur la meme ligne et la suite passe à la ligne suivante etc...
Je n'ai pas remis un <div class="row"> après le 3e contenu pour ne pas forcer la ligne justement... car j'ai un soucis parce que mon contenu 3 est beaucoup plus long (et donc plus haut) que mes autres contenus, ce qui fait que mes contenus 4 et 5 se retrouvent tout en bas de la page, ligne suivante...
Et je cherche donc à réorganiser l'affichage de mes blocs, afin qu'ils s'adaptent à la place disponible. Dans un monde parfait, j'aimerai que le contenu 4 se retrouve juste sous le contenu 1, idem pour 2 et 4 et laisser le contenu 3 tout seul car il est le plus long.

En gros, ce n'est plus l'ordre mais la hauteur des blocs qui organise la page pour avoir un contenu dense et optimisé, sans vide perdu...

J'ai du mal à chercher un script faisant cela car je ne sais pas trop quels mots clés employer... ai-je été suffisamment clair sur ce que je cherche d'ailleurs ? J'ai joins une image pour plus de clarté... le coté gauche, c'est ce que j'ai, le coté droit c'est ce que je cherche à obtenir...

upload/1508430599-22348-btstp.gif

Si quelqu'un peut m'aider ? A moins que cela existe nativement dans Bootstrap ?

Merci !
peu importe, ça peut rester dans l'ordre 1, 2, 3, 4, 5... ce que je veux surtout c'est éviter d'avoir ce gros espace vide à gauche sous 1 et 2...
si c'etait le bloc 1 (positionné le plus à gauche) qui etait le plus haut, alors le reste se positionnerait comme il faut... le probleme c'est qu'il est à droite...
Bonjour,
En fait, tu veux 2 colonnes, avec la 1ère qui contient 2 colonnes:
<div class="col-md-8">
    <div class="row">
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
    </div>
</div>
<div class="col-md-4">
    <div class="row">
         <div class="col-md-12"></div>
    </div>
</div>>


Ou 3 colonnes
<div class="col-md-4">
    <div class="row">
         <div class="col-md-12"></div>
    </div>
    <div class="row">
         <div class="col-md-12"></div>
    </div>
</div>
<div class="col-md-4">
    <div class="row">
         <div class="col-md-12"></div>
    </div>
    <div class="row">
         <div class="col-md-12"></div>
    </div>
</div>>
<div class="col-md-4">
    <div class="row">
         <div class="col-md-12"></div>
    </div>
</div>>

Modifié par loicbcn (20 Oct 2017 - 09:21)
je veux 3 colonnes... mais j'aimerai quelles puissent se réorganiser en fonction de la taille en hauteur des contenus. Parce que mes contenus sont dynamiques, donc parfois se sera le bloc 3 qui sera le plus grand, mais parfois se sera le 2e ou le 1er. Et j'aimerai que les blocs de la 2e ligne ne soient pas contraints d'etre tous au meme niveau s'il y a la place pour qu'ils puissent rentrer au dessus. Ca ne veut pas dire que je veuille changer l'ordre des blocs, je veux juste ne pas avoir cet espace blanc que l'on voit dans mon image entre le bloc 1 et 4 ou le bloc 2 et 5
Peut-être que bootstrap n'est pas la solution à ton problème ... Peut-être avec flexbox ?
Bon courage.
Sujet clos
Aller à