Problems with Grid Dynamically generated Layout

Question

Problems with Grid Dynamically generated Layout

Navigation

#1 by (0 votes)

-1

Good morning everyone!

I'm a beginner in the front-end area and it's one of the first times I'm using Boostrap. This time I need to deliver a job to school and for this I developed a feed species divided into two columns, but I can not get the columns to break automatically.

Items are arranged within a ol , and every li is within a for that takes the information from the database. Here is the code snippet and the image as it appears:

<div id="feed">
   <ol id="feed-lista">
      <?php for($i = 0; $i < sizeof($posts); $i++){ ?>
         <div class="col-sm-6">
            <li class="feed-container panel">
                <div class="feed-item">
                    <div class="dropdown">
                        [...itens do menu lateral...]
                    </div>
                     <img src="<?= $posts[$i]['foto_perfil'] ?>" class="feed-foto" alt="Foto de perfil de <?= $posts[$i]['nome'].' '.$posts[$i]['sobrenome']?>" />

                    <div class="feed-dados">
                    <a href="profile.php?username=<?= $posts[$i]['username'] ?>" >
                    <span class="feed-nome"><?= $posts[$i]['nome'].' '.$posts[$i]['sobrenome'] ?></span></a>
                    <span class="feed-username"> &bull; <a class="feed-username" href="profile.php?username=<?= $posts[$i]['username'] ?> ">@<?= $posts[$i]['username'] ?></a></span>

                        <div class="feed-data">
                        [... código para tratamento da data ...]
                        </div>

                </div>


                <div class="feed-conteudo">
                    <div class="feed-texto">
                        <?= $posts[$i]['status']?>
                    </div>

                    <div class="feed-localizacao">
                        <i class="fa fa-map-marker" aria-hidden="true"></i> em <?= $posts[$i]['local']." - ". $posts[$i]['cidade'].", ".$posts[$i]['pais']  ?>
                    </div>
                </div>
            </div>
        </li>
    </div>
<?php } ?>
</ol>
</div>

The above code returns this:

IntheCSSitself,onlyformattingwasusedfortheitemswithineachli,butnothingrelatedtothepositioning.cananybodyhelpme?AmorefamiliarexampleofhowI'dlikeittostay(beingdynamicallygenerated)istheGooglePlusfeed:

Thank you very much!

php grid layout bootstrap

asked by anonymous 04.08.2016 / 16:29

1 answer

Simple Google Maps with ionic 2 Databinding error in Android Studio 2.1.2: package databinding does not exist

score 0 · Answer 1

Man, there is a plugin that does this, with bootstrapping it will be a bit tricky for you to do.

Of one studied, it is very practical.

link

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

It would be more or less like that, the grid item would be your li. This plugin makes according to the resolution of your screen it adapts and leaves responsive automatically.