Bootstrap网格每数行缺失左侧列问题求助（Express+MongoDB MTG卡牌库）

Hey there! Let's work through that annoying left-column gap you're seeing in your Bootstrap grid—when you're trying to show 3 MTG cards per row with col-lg-4 but every few rows have an empty spot on the left. Since you've ruled out image issues, this almost always boils down to uneven card heights throwing off Bootstrap's flow layout. Here's how to fix it:

1. Force Uniform Card Heights #

Bootstrap's grid uses a flexible layout, so if one card is taller than the others (thanks to longer card names, rule text, etc.), the next row's columns will slide up to fill the empty space. Fix this by making all cards the same height:

• Add Bootstrap's built-in h-100 class to your card container. This tells each card to take up 100% of the height of its parent column.
• Example code snippet (in your card.ejs):

  <div class="col-lg-4 mb-4">
    <div class="card h-100">
      <!-- Card content: image, name, rules text, etc. -->
      <img src="<%= card.imageUrl %>" class="card-img-top" alt="<%= card.name %>">
      <div class="card-body">
        <h5 class="card-title"><%= card.name %></h5>
        <p class="card-text"><%= card.rulesText %></p>
      </div>
    </div>
  </div>
  

2. Use Bootstrap's row-cols Classes (Cleaner Alternative) #

Instead of manually adding col-lg-4 to each card, let Bootstrap handle the column count per row with row-cols classes. This reduces human error and ensures consistent layout:

• Replace your basic .row with a responsive row that defines columns per breakpoint:

  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <!-- Loop through your cards here, each in a plain <div> (no col-lg-4 needed!) -->
    <% cards.forEach(card => { %>
      <div>
        <div class="card h-100">
          <!-- Card content -->
        </div>
      </div>
    <% }) %>
  </div>
  

  • row-cols-1: 1 card per row on mobile
  • row-cols-md-2: 2 cards per row on tablets
  • row-cols-lg-3: 3 cards per row on desktop
  • g-4: Adds consistent gap between cards (adjust the number for more/less space)

3. Check for Unintended CSS Overrides #

If the above fixes don't work, pop open your browser's DevTools (F12) and inspect the columns/cards:

• Make sure no custom CSS is adding extra margin or padding to columns that pushes their total width over Bootstrap's 12-column grid.
• Verify that all .col-lg-4 elements are direct children of a .row—nested rows/columns can break the layout flow.

If you can share a snippet of your actual card loop code from card.ejs, I can help troubleshoot further, but these steps should resolve that frustrating left-gap issue 9 times out of 10.

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