Bootstrap5.3电商搜索页响应式商品显示数量调整问题

安全阿岳

2026-6-28

解决Bootstrap电商搜索页响应式商品布局问题

我正在开发电商网站搜索页前端，想要实现类似亚马逊的响应式布局——随着屏幕缩小逐步减少每行商品数量，同时解决首行6个、次行4个时的多余空白问题。用的是Bootstrap 5.3，具体需求：

1920px全屏时每行6个商品
≥1575px时每行5个，隐藏第6个及以后的商品
≥1270px时每行4个，隐藏第5个及以后的商品
≥970px时每行3个，隐藏第4个及以后的商品
≥670px时每行2个，隐藏第3个及以后的商品
≤670px时每行1个，隐藏第2个及以后的商品

原代码没实现效果，下面是我的代码：

原CSS代码

@media (min-width: 1250px) {
    .col#card-row {
        flex: 0 0 25%; /* Show 4 items in a row */
        max-width: 25%;
    }
}

@media (max-width: 1249px) {
    .col#card-row {
        display: none; /* Hide all items by default */
    }
}

@media (max-width: 780px) {
    .col#card-row:nth-child(-n+2) {
        display: block; /* Show the first 2 items */
    }

    .col#card-row:nth-child(n+3) {
        display: none; /* Hide the rest of the items */
    }
}

@media (max-width: 500px) {
    .col#card-row:first-child {
        display: block; /* Show only the first item */
    }

    .col#card-row:nth-child(n+2) {
        display: none; /* Hide the rest of the items */
    }
}

原HTML代码

<div class="container-fluid">
    {{-- item 1  --}}
    <div class="row g-3 mb-5" id="card-row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>
    </div>

    {{-- item 2  --}}
    <div class="row g-3 mb-5" id="card-row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="..." class="card-img-top" alt="product image">
                
                <div class="card-body">
                    <h1 class="h3">Product Name</h1>
                    <h2 class="h4">$50</h2>
                    <a href="" class="text-muted text-decoration-none">Shop Name</a>
                </div>
            </div>
        </div>
    </div>
</div>

问题分析

ID重复：#card-row被多次使用，HTML中ID必须唯一，应改用class。
布局拆分错误：商品被拆成多个row，导致不同行数量不一致时出现空白，需将所有商品放入同一个row容器。
选择器逻辑错误：原CSS中.col#card-row的选择完全错位，card-row是容器标识而非列的标识。
固定宽度限制：卡片的width:18rem会破坏Bootstrap的网格自适应，需删除该固定样式。

修改后的代码

HTML代码

<div class="container-fluid">
  <div class="row g-3 mb-5 card-row">
    <!-- 商品1 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品2 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品3 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品4 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品5 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品6 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品7 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 商品8 -->
    <div class="col">
      <div class="card">
        <img src="..." class="card-img-top" alt="product image">
        <div class="card-body">
          <h1 class="h3">Product Name</h1>
          <h2 class="h4">$50</h2>
          <a href="" class="text-muted text-decoration-none">Shop Name</a>
        </div>
      </div>
    </div>
    <!-- 更多商品可继续添加 -->
  </div>
</div>

CSS代码

/* 默认状态：≤670px，每行1个，隐藏第2个及以后 */
.card-row .col:nth-child(n+2) {
  display: none;
}

.card-row .col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ≥670px，每行2个，隐藏第3个及以后 */
@media (min-width: 670px) {
  .card-row .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .card-row .col:nth-child(n+3) {
    display: none;
  }
  .card-row .col:nth-child(-n+2) {
    display: block;
  }
}

/* ≥970px，每行3个，隐藏第4个及以后 */
@media (min-width: 970px) {
  .card-row .col {
    flex: 0 0 calc(100%/3);
    max-width: calc(100%/3);
  }
  .card-row .col:nth-child(n+4) {
    display: none;
  }
  .card-row .col:nth-child(-n+3) {
    display: block;
  }
}

/* ≥1270px，每行4个，隐藏第5个及以后 */
@media (min-width: 1270px) {
  .card-row .col {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .card-row .col:nth-child(n+5) {
    display: none;
  }
  .card-row .col:nth-child(-n+4) {
    display: block;
  }
}

/* ≥1575px，每行5个，隐藏第6个及以后 */
@media (min-width: 1575px) {
  .card-row .col {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .card-row .col:nth-child(n+6) {
    display: none;
  }
  .card-row .col:nth-child(-n+5) {
    display: block;
  }
}

/* ≥1920px，每行6个，显示所有 */
@media (min-width: 1920px) {
  .card-row .col {
    flex: 0 0 calc(100%/6);
    max-width: calc(100%/6);
  }
  .card-row .col {
    display: block;
  }
}

关键说明

统一容器：所有商品放入单个row，保证布局连续，避免行级空白。
class替代ID：用.card-row替代重复的#card-row，符合HTML规范。
精确断点匹配：严格按照需求的屏幕宽度编写媒体查询，从最小到最大递进，优先级正确。
动态宽度计算：用calc(100%/n)精确分配列宽，确保每行无空白。
精准显示控制：每个断点下只显示前n个商品，隐藏后续项，完全匹配需求。

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

Bootstrap5.3电商搜索页响应式商品显示数量调整问题

原CSS代码 #

原HTML代码 #

问题分析 #

修改后的代码 #

HTML代码

CSS代码

关键说明 #

原CSS代码

原HTML代码

问题分析

修改后的代码

关键说明