Bootstrap Flex与justify-content失效：搜索栏无法左对齐

核心问题是搜索栏所在行未沿用卡片行的对齐规则，且未限制宽度导致无法匹配卡片位置，以下是修正方案：

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-lg-3 offset-lg-1">
  <!-- 访客统计卡片行 -->
  <div class="row mb-4 justify-content-start">
    <div class="card text-white visitor-card" style="width: 16rem;">
      <div class="card-body">
        <h5 class="card-title">Total Pengunjung :</h5>
        <?php 
            $date  = date("Y-m-d");
            $pengunjunghariini  = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
            $dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row(); 
            $totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
            $bataswaktu = time() - 300;
            $pengunjungonline  = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online
        ?>

        <h5 class="card-title">
          <?php echo $totalpengunjung ?>
        </h5>
      </div>
    </div>
  </div>

  <!-- 搜索栏行：统一对齐规则并匹配卡片宽度 -->
  <div class="row justify-content-start">
    <div style="width: 16rem;">
      <form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
        <input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
        <button class="btn btn-outline-primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</div>

关键修改点 #

• 搜索栏外层容器改为row justify-content-start，和卡片行使用完全一致的对齐规则；
• 给搜索栏的父div设置width: 16rem，与访客卡片宽度完全匹配，确保整体宽度对齐；
• 移除冗余的d-flex flex-row，因为Bootstrap的row本身已是flex容器，无需重复设置。

内容的提问来源于stack exchange，提问作者Devlogia