web-dev-qa-db-fra.com

Comment créer les effets de maçonnerie avec juste bootstrap 3 système de grille et css

Mon problème est que je veux afficher les données dans un format de bloc en utilisant le système de grille bootstrap 3 mais je ne veux pas les vides espaces blancs ennuyeux qui se produisent de la hauteur contrainte à la ligne ci-dessus. Par exemple , Si je fais:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

alors il me restera un espace entre les deux rangées, ce que j'essaye d'obtenir est un effet de maçonnerie (où un remplissage de poteau se trouve près du poteau au-dessus) avec seulement l'utilisation de CSS, spécifiquement le bootstrap = Système de grille 3. IE:

enter image description here

Je sais que cela peut être fait avec plugins mais je veux voir s'il y a une solution plus pure (même si elle doit être hacky). Des idées?

csstwitter-bootstrapmasonry
9
Typhomism

Nous l'avons fait sur un site et nous avons mis la grille en rangées verticales.

Exemple:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>
17
Aibrean

Dans Bootstap, l'élément .row Est utilisé pour effacer les flottants des blocs div/col qu'il contient (dans votre exemple. col-lg-4);

Il est donc fondamentalement impossible d'avoir des éléments dans des rangées différentes côte à côte, vous devez nécessairement changer le balisage;

D'autre part, l'utilisation de bootstrap système de colonnes réactif pourrait être utile pour créer un effet CSS-Masonry:
vous pouvez essayer de placer tous les "col-items" sur lesquels vous souhaitez créer l'effet de maçonnerie à l'intérieur d'une ligne , en affichant sous forme de bloc en ligne (plus peut-être un autre de petits ajustements ..) devraient faire l'affaire (c'est la voie à suivre si vous êtes bloqué uniquement avec CSS ..);

En conclusion, souvenez-vous que Masonry est né et reste une bibliothèque de disposition de grille JavaScript, donc même si vous pouvez le faire fonctionner avec CSS, je vous suggère d'utiliser JS.

mille mercis à Desandro pour cette idée géniale;

6
maioman

Dans Bootstrap 4, vous pouvez utiliser .card-columns, voir ici: https://v4-alpha.getbootstrap.com/components/card/

Bien que je recommanderais d'utiliser isotope car JS offre plus de contrôle et une meilleure compatibilité que CSS.

4
Max

j'ai fait une simple grille de maçonnerie qui reçoit des images de la base de données, par juste css comme ceci:

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }
1
Ouahib Abdallah