使用 Bootstrap 4 将动态 div.card 水平居中

Question

我正在基于 Bootstrap 4 的网站上列出数据库中的文章。我希望块 (div.card) 始终水平居中，无论有多少块，每行最多 3 个块。我很确定有一种简单的方法可以做到这一点，但到目前为止我的测试尚未成功。

我使用的循环就是这样组成的：

echo '<section id="actualites" class="text-center">';
echo '<h2>Nos actualités</h2>';
echo '<div class="row">';
while ($data_news = mysqli_fetch_assoc($rq)){
    echo '<article class="card col-md-3">';
    echo '...';
    echo '</article>';
}
}
echo '</div>';
echo '</section>';

如果您需要更多元素，请告诉我。

谢谢你的帮助

Answer 1

看到

class="text-center"

不起作用。您可以尝试以下...

echo '<section id="actualites" class="text-center">';
echo '<h2>Nos actualités</h2>';
echo '<div class="row">';
while ($data_news = mysqli_fetch_assoc($rq)){
    echo '<article class="card col-md-3" style="text-align: center !important;">';
    echo '...';
    echo '</article>';
}
}
echo '</div>';
echo '</section>';