Question

我正在使用PHP循环从MySQL数据库创建和显示文章（作为'col'divs）。如果我使用3个“ col-6” div，则第3个将移动到上述两个div的下方。我希望它保持靠近其上方的div（在这种情况下为第一个col-6 div）。我该如何实现？

我发现这是引导列的问题。另外，在这种情况下，我不能使用绝对定位。

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>';}?>```

Answer 1

页面的整个宽度由col-12定义。因此，如果您想让3个相同宽度的列彼此相邻，请使用col-md-4

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

这将导致3个等宽的列彼此相邻。

列div移动到列div下方，且高度div高于

1 个答案: