Side by side in Bootstrap, jumping line

Question

I have a simple problem with Bootstrap v4.0.0-alpha.5.

I’ll run it through the database. It lines side by side but in some cases a line is skipped, and there is only one item for the bottom line.

<div class="row">
                <div class="col-md-12">
                    <h2 style="text-align:left; color:white; margin:-top:1%;">Ação/Aventura</h2>

                    <?php

                    require 'conexao.php';

                    $consulta = $PDO->query("SELECT * FROM filmes WHERE categoria1 = 'acaoaventura' ORDER BY id ASC;");

                    while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) { ?>

                    <div class="col-md-2" style="margin:0;margin-bottom:3%;margin-top:2%;padding:0.1%;">

                        <div class="col-md-12" style="margin:0;padding:0;">
                            <a href="filme.php?id=<?php echo "$linha[id]";?>">
                                <img src="<?php echo "$linha[fotodacapa]"; ?>" class="img-fluid">                               
                                <p style="color:yellow; text-align:center; margin:0; padding:0;"><?php echo "$linha[nome]"; ?></p>
                                <div class="col-md-6">
                                    <p style="color:white; text-align:center; margin:0; padding:0;">16 visitas</p></a>
                                </div>

                                <div class="col-md-6">
                                    <a class="venobox_custom" data-type="youtube" href="https://youtu.be/<?php echo "$linha[trailer]"; ?>?autoplay=1"><p style="color:white; text-align:center; margin:0; padding:0;"><i class="fa fa-film" aria-hidden="true"></i> Trailer</p></a>
                                </div>
                            </div>
                        </div>

                        <?php } ?>

                    </div>
                </div>

In this code snippet, I do the search to show on the screen what comes from the bank, but get the following result:

I’ve tried to move a few items around, but to no avail. In another job, I managed to take the "container", something not recommended, but it worked for me. This time, did not solve.

Some idea of friends?

Thank you in advance!

Note: Do not notice the settings of Div’s, as I am still testing, I have not organized the classes.

Answer 1

That’s not how bootstrap grids work, the bootstrap solution @inkeliz worked more for coincidence, but it’s not the right solution, especially when it comes to the way you applied it.

As I explained in Prevent line breaking (encavalating) in col-Md bootstrap, then the steps you should follow to use Grids are basically:

1. Do not use col- inside col-
2. The "parent" element of col- should always be a row

3. The sum of all cols should always be 12, for example:

   • If you have 4 Divs with the class .col-*-3 then the sum will be 12 (3+3+3+3 = 12)
   • If you have 3 Divs with the class .col-*-4 then the sum will be 12 (4+4+4 = 12)
   • Can also do .col-*-6+.col-*-3+.col-*-3 for example (6+3+3=12)

---

First you explain where the mistakes are

Follow the problems in your HTML:

1. You <div class="col-md-2" style="margin:0;margin-bottom:3%;margin-top:2%;padding:0.1%;"> within a col-md-12, like I said, col- should always go inside row, then you’re wrong.

2. You have a <div class="col-md-12" style="margin:0;padding:0;"> within a col-md-2

3. You have two <div class="col-md-6"> inside col-md-12

4. The tag <a> is poorly closed: <a href="filme.php?id=<?php echo "$linha[id]";?>">, you put the </a> within another tag, probably not to conflict with the link to youtube. But this is wrong.

5. Has two col mixed with other HTML elements that are not part of the grid.

6. Never changes the margins of a col- using margin: or margin-left or margin-right, I think top and bottom is fine.

7. Extra: Although not affecting the grids has an error in your CSS is wrong h2 style="text-align:left; color:white; margin:-top:1%;, has a margin:-top, the correct is margin-top:1%;

---

How to solve

As I explained here /a/180194/3635 being PHP you can use something like $i % (numero de colunas desejada), no seu caso você usou "col-md-2" then I believe you want to 6 columns per rows

Should stay like this:

<div class="row">
    <div class="col-md-12"> <!-- aqui está certo total é igual 12 -->
        <h2 style="text-align:left; color:white; margin:-top:1%;">Ação/Aventura</h2>

        <?php
        require 'conexao.php';

        $consulta = $PDO->query("SELECT * FROM filmes WHERE categoria1 = 'acaoaventura' ORDER BY id ASC;");

        while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {
        $i = 0;

        while ($i < 20) {

        $needarow = !($i % 6);
        $i++;//Deve vir depois
        ?>

        <?php if ($needarow) { ?>
        <?php if ($i > 1) { ?>

        </div> <!-- //fecha .row -->

        <?php } ?>

        <div class="row">

        <?php }?>

            <div class="col-md-2" style="margin-bottom:3%;margin-top:2%;padding:0.1%;">

                <!--//acho que nem precisa de col aqui -->
                <a href="filme.php?id=<?php echo $linha['id'];?>">

                    <img src="" class="img-fluid">
                    <p style="color:yellow; text-align:center; margin:0; padding:0;"><?php echo $linha['nome']; ?></p>
                </a> <!-- Link fechado -->

                <div class="row"> <!--// Row necessário para adicionar -->
                    <div class="col-md-6">
                        <p>16 visitas</p>
                    </div>

                    <div class="col-md-6">
                        <a class="venobox_custom" data-type="youtube" href="https://youtu.be/<?php echo $linha[trailer]; ?>?autoplay=1"><p><i class="fa fa-film" aria-hidden="true"></i> Trailer</p></a>
                    </div>
                </div>

            </div>

        <?php
        }   //Termina o loop
        ?>

        </div> <!-- //fecha o ultimo .row -->
    </div>
</div>

Answer 2

/!\ This is a gambit!

You can use the matchHeight so that all elements stay the same size.

Get in http://brm.io/jquery-match-height/, can use:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

Then use:

$('.col-md-2').matchHeight();

This will make all the elements .col-md-2 have the same height, correcting the problem.

This is the simplest way to solve this if you are using a single row with elements exceeding their width row.

Answer 3

Put a height EQUAL for all items marked with col-Md-2.

PS: using styling in HTML is highly not advisable, that’s why Bootstrap is there, so you don’t have to do this.

Answer 4

At first, the problem is when your query results in a title with 2 lines and another with 1 only, it causes misalignment and ends up making you skip a line.

You have some options to solve:

Create a larger width so that the text is not in 2 lines, or create a default margin at the height of the photo and title squares.

to keep them aligned.