没问题，咱们可以用Bootstrap的网格系统配合自定义CSS来实现你要的效果——每列对应一个品牌，列内垂直展示产品，整体横向滚动溢出。完全不用纠结表格的问题，因为表格确实是行优先的结构，不符合你的列组织需求。

核心思路 #

1. 外层容器设置overflow-x: auto，让内容超出时显示横向滚动条
2. 用Bootstrap的row包裹品牌列，给row加flex-nowrap类，强制列不换行（默认row会自动换行）
3. 每个品牌对应一个固定宽度的列（比如col-3或自定义最小宽度），列内放置该品牌的产品列表

完整代码示例 #

HTML结构（静态示例）

<div class="container-fluid px-4">
  <h2>按品牌分类产品</h2>
  <!-- 横向滚动容器 -->
  <div class="brand-scroll-container overflow-x-auto pb-3">
    <div class="row flex-nowrap g-3">
      <!-- 品牌列1 -->
      <div class="col-3">
        <div class="card h-100">
          <div class="card-header bg-primary text-white">
            <h5>品牌A</h5>
          </div>
          <div class="card-body">
            <ul class="list-unstyled">
              <li class="mb-2">产品A1</li>
              <li class="mb-2">产品A2</li>
              <li class="mb-2">产品A3</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 品牌列2 -->
      <div class="col-3">
        <div class="card h-100">
          <div class="card-header bg-success text-white">
            <h5>品牌B</h5>
          </div>
          <div class="card-body">
            <ul class="list-unstyled">
              <li class="mb-2">产品B1</li>
              <li class="mb-2">产品B2</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 可继续添加更多品牌列 -->
    </div>
  </div>
</div>

自定义CSS（优化滚动体验）

.brand-scroll-container::-webkit-scrollbar {
  height: 8px;
}
.brand-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.brand-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.brand-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

动态生成列（原生JS示例）

如果需要从后端获取品牌和产品数据，用JS动态生成列也很简单：

// 模拟后端返回的品牌数据
const brandData = [
  { name: "品牌C", products: ["产品C1", "产品C2", "产品C3", "产品C4"] },
  { name: "品牌D", products: ["产品D1", "产品D2"] },
  { name: "品牌E", products: ["产品E1", "产品E2", "产品E3"] }
];

// 获取row容器
const rowEl = document.querySelector('.row.flex-nowrap');

// 循环生成品牌列
brandData.forEach(brand => {
  const col = document.createElement('div');
  col.className = 'col-3';
  
  col.innerHTML = `
    <div class="card h-100">
      <div class="card-header bg-info text-white">
        <h5>${brand.name}</h5>
      </div>
      <div class="card-body">
        <ul class="list-unstyled">
          ${brand.products.map(item => `<li class="mb-2">${item}</li>`).join('')}
        </ul>
      </div>
    </div>
  `;
  
  rowEl.appendChild(col);
});

关键细节说明 #

• flex-nowrap：这是实现横向排列的核心，避免Bootstrap的row默认换行行为
• col-3：你可以根据需求调整列宽，比如改成col-4、col-2，或者用style="min-width: 280px;"自定义最小宽度，保证每个品牌列有足够展示空间
• h-100：给卡片添加这个类，让所有品牌列高度对齐，避免布局错乱
• overflow-x: auto：外层容器的这个属性让内容超出时自动显示横向滚动条

这样实现的布局完全贴合你的需求：每列对应一个品牌，列内垂直展示产品，整体支持横向滚动查看更多品牌，而且完全基于Bootstrap，兼容性拉满。

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