Estoy usando PHP Loop para crear y mostrar artículos (como 'COL' DIVS) de la base de datos MySQL. Si uso división de 3 "Col-6", el 3er se mueve debajo de ambos dives anteriores. Quiero que se quede cerca del DIV por encima de él (el primer COL-6 DIV en este caso). ¿Cómo puedo conseguir esto?

He descubierto que este es un problema con las columnas de bootstrap. Además, no puedo usar el posicionamiento absoluto en este caso.

while($row=mysqli_fetch_array($run_query)){
    echo '<div class="col-md-6 col-xl-4 blogColumn">';
        echo '<a class="articleLink" href="show.php?blogId=';echo $row['id'].'" target="_blank">';
            echo '<article>';
                echo '<header>';
                    if($row['file_id']==null){
                        echo '<img class="img-fluid rounded focus" src="https://i.ibb.co/ZNDm012/logo.jpg"/>';
                    } else{
                        $fileId=$row['file_id'];
                        $q="SELECT * FROM uploads WHERE id='$fileId'";
                        $run_q=mysqli_query($con,$q) or die(mysqli_error($con));   
                        $res=mysqli_fetch_array($run_q);
                        $path="uploads/".$res['name'];
                        if($res['type']=='image'){     
                            echo '<img class="img-fluid rounded focus" src="'.$path.'"/>';
                        } else {
                            echo '<video class="articleVideo" src="'.$path.'" controls="controls">';
                            echo '</video>';
                        } }
                    echo '<h2>'.$row['title'].'</h2>';
                echo '</header>';
                echo '<p>'.substr($row['description'],0,100).'... Read More'.'</p>';
            echo '</article>';
        echo '</a>';
        echo '<hr/>';
    echo '</div>';}?>```
1
Shashwat Srivastava 29 jun. 2019 a las 13:36

1 respuesta

La mejor respuesta

El ancho completo de la página está definido por COL-12. Así que si desea tener 3 columnas de ancho de la misma anchura junto a la otra, use COL-MD-4

<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>

Esto dará lugar a 3 columnas de ancho igual al lado del otro.

2
CSeem 29 jun. 2019 a las 10:43