Javascript 如何使用引导列在行中显示PHP中的图像和文本?

Javascript 如何使用引导列在行中显示PHP中的图像和文本?,javascript,php,html,css,sql,Javascript,Php,Html,Css,Sql,想要在同一列中以5行的形式显示图像和文本,但在给出的代码中,这并不能满足我的要求,因为这些图像和文本在显示时是以行而不是列的形式显示的。谢谢你的帮助 此图像显示当前屏幕上显示的内容 我想要的是这个 “class=“imagem”style=“高度:100px;重量:100px;"> 您只需使用每个图像构建项目。容器仍在循环之外 <div class="container"> <?php $select_stmt=$db->prepa

想要在同一列中以5行的形式显示图像和文本,但在给出的代码中,这并不能满足我的要求,因为这些图像和文本在显示时是以行而不是列的形式显示的。谢谢你的帮助

此图像显示当前屏幕上显示的内容

我想要的是这个


“class=“imagem”style=“高度:100px;重量:100px;">

您只需使用每个图像构建项目。容器仍在循环之外

    <div class="container">

    <?php
        $select_stmt=$db->prepare("SELECT * FROM galeria ORDER BY id DESC;" );  //sql select query
        $select_stmt->execute();
        while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
        {
    ?>
<div class="col-sm-2">
            <div class="row">
                <div class="col-sm-12"><img src="upload/<?php echo $row['image']; ?>" class="imagem" style="height: 100px; weight: 100px;"></div>
                <div class="col-sm-12"><a id=""><?php echo $row['texto'];?></a></div>
            </div>
</div>
    <?php
    }
    ?>

    </div>

“class=“imagem”style=“高度:100px;重量:100px;”>

您不应该每行创建一个容器。只有一个容器包含所有行
将代码更改为:

<div class="container">
<?php
    $select_stmt=$db->prepare("SELECT * FROM galeria ORDER BY id DESC;" );  //sql select query
    $select_stmt->execute();
    while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
    {
?>

    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6"><img src="upload/<?php echo $row['image']; ?>" class="imagem" style="height: 100px; weight: 100px;"></div>
            <div class="col-sm-6"><a id=""><?php echo $row['texto'];?></a></div>
        </div>
    </div>


<?php
}
?>
</div>

“class=“imagem”style=“高度:100px;重量:100px;">

现在它正在工作。感谢大家的帮助。下面是正在工作的代码

<div class="container">
<div class="row">

<?php
    $select_stmt=$db->prepare("SELECT * FROM galeria ORDER BY id DESC;" );  //sql select query
    $select_stmt->execute();
    while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
    {
?>

        <div class="col-sm-2">
            <div class="col-sm-12"><img src="upload/<?php echo $row['image']; ?>" class="imagem" style="height: 100px; weight: 100px;"></div>
            <div class="col-sm-12"><a id=""><?php echo $row['texto'];?></a></div>
        </div>

<?php
}
?>

</div>
</div>

“class=“imagem”style=“高度:100px;重量:100px;”>
我的方式

 <div class="col-md-3 col-sm-6 col-xs-12">

    <a href="/images/<?php echo... 

      </div>


不要为每行创建容器…-)您的设计将更加复杂,因为您正试图在Bootstrap的12列网格中创建5列。您必须在每组五个
.col-sm-2
元素的开始和结束处编写一个空的
.col-sm-1
。我说过它应该是5,但在本例中它可以是其他值,也可以是2、3或4。我想更改您的建议,但不起作用。保持原样,samei确实尝试过你的改变,但没有成功,你可以从检查员的照片上看到这一点。您正在使用引导?我希望您被建议而不工作。保持不变你在chrome或firefox dom inspector中看到了什么?非常感谢你的帮助。我确实做到了这一点,我将向大家展示。
 <div class="col-md-3 col-sm-6 col-xs-12">

    <a href="/images/<?php echo... 

      </div>
<div style="float: left; margin-left: 20px; margin-top: 10px;">

    <a href="/images/<?php echo...

        </div>