我的 Bootstrap 圖像網格沒有按預期工作

Question

所以我一直在做我的作品集，現在我正在做技能部分，其中包含每個技能徽標的 6 個圖像網格。 為此，我正在使用 Boostrap，但第二行有問題。 它只是在與第一行不同的中間聚集。 我正在鏈接我的 CodePen，以防有人可以幫助我確定我的問題..（CodePen 的想法只是觀看代碼，因為你們看不到那里的圖像）。

https://codepen.io/norwyx/pen/yLozjLg

這是不起作用的部分的 HTML：

<div class="row d-flex justify-content-center align-items-center" id="skills__first-row">
    <div class="col-md-4 skills__item">
      <img src="./images/html5-logo.png" alt="HTML5 logo" class="img-fluid" id="html__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/css3-logo.png" alt="CSS3 logo" class="img-fluid" id="css__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/js-logo.png" alt="JavaScript logo" class="img-fluid" id="js__logo"> 
  </div>
  <!-- Second Row -->
  <div class="row d-flex justify-content-center align-items-center" id="skills__first-row">
    <div class="col-md-4 skills__item">
      <img src="./images/html5-logo.png" alt="HTML5 logo" class="img-fluid" id="html__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/css3-logo.png" alt="CSS3 logo" class="img-fluid" id="css__logo">
    </div>
    <div class="col-md-4 skills__item">
      <img src="./images/js-logo.png" alt="JavaScript logo" class="img-fluid" id="js__logo"> 
  </div>

Answer 1

首先從row中移除d-flex類，bootstrap 4和5，row已經有彈性了，第二件事是，如果你想讓你的圖像在div text-center在每列上添加text-center類，您的問題將得到解決