php - Bootstrap-如何水平对齐foreach内的卡？

<article>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0">
                <?php foreach ($publicacao as $pl): ?>
                    <div class="card">
                        <div class="img-container">
                            <a href="index.php?post=<?php echo $pl['title']?>">
                                <img src="<?php echo $pl['capa']?>" alt="<?php echo $pl['alt']?>" class="card-img-top">
                            </a>
                        </div>

                        <div class="card-body">
                            <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink">
                                <h2 class="cardTitle"><?php echo $pl['title']?></h2>
                            </a>
                            <p class="card-text text-muted"><?php echo $pl['text']?></p>
                            <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</article>

我有这个脚本，它从我的数据库返回记录。我在数据库里有10条记录，问题是卡片是垂直排列的，一张在另一张上面。正确的做法是让卡片水平对齐，我该怎么做？

最佳答案

根据需要，可以使用col-*类指定每张卡需要多少网格。

.card{
  margin-bottom: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
             <!-- loop simulation -->
              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/2" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
               <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/1" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
                              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/3" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
                              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/1" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
               <!-- loop simulation -->
            </div>