Bootstrap卡片间距设置及一行8张卡片布局问题求助

我明白你的需求——要让8张固定宽度的卡片和左侧侧边栏在同一行，即使超出屏幕也不换行，而是通过横向滚动查看。问题出在Bootstrap的默认栅格系统会在空间不足时自动换行，而且col-lg-1是按比例分配宽度，会挤压你的固定宽度卡片。

下面是具体的解决方案，直接修改你的代码就能实现：

修改后的代码 #

<div class="row flex-nowrap overflow-x-auto" style="padding: 0 1rem;">
  <!-- 左侧侧边栏：禁止压缩，保持宽度 -->
  <div class="col-sm-2 flex-shrink-0">
    <div class="card-header">Discover new genres {{genre}}</div>
  </div>

  <!-- 卡片容器：循环生成8个卡片，每个固定宽度且不压缩 -->
  <!-- 这里假设你是循环渲染8个卡片，我保留了单个卡片的结构 -->
  <div class="flex-shrink-0 me-3">
    <div class="card border-secondary mb-3" style="width: 10rem;">
      <img 
        class="card-img-top img-responsive full-width circle-img rounded-circle" 
        src="{{rec['artpath']}}" 
        alt="{{rec['name']}}"
      >
      <div class="card-block">
        <div class="card-body">
          <p class="card-title text-center">
            <small>{{rec["name"]}}</small>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- 重复上面的卡片容器7次，总共8张 -->
</div>

关键修改点解释 #

• flex-nowrap：给row添加这个类，强制所有子元素在同一行排列，不会自动换行
• overflow-x: auto：当内容超出屏幕宽度时，自动显示横向滚动条，用户可以滚动查看所有卡片
• flex-shrink-0：分别给左侧侧边栏和每个卡片容器添加这个类，防止它们在空间不足时被压缩，保证你设置的固定宽度（侧边栏的col-sm-2和卡片的10rem）
• 移除了col-lg-1：因为我们不需要按比例分配宽度，而是用固定宽度的卡片，所以换成普通的容器加上flex-shrink-0
• me-3：给每个卡片添加右边距，让卡片之间有合适的间距（可以根据需求调整为me-2或其他间距类）

额外注意 #

• 如果你的卡片是通过循环生成的，确保每个卡片都包裹在带有flex-shrink-0 me-3的容器里
• 可以给外层的row添加py-3类，增加上下内边距，让布局更美观
• 小屏幕下，侧边栏依然会保持col-sm-2的宽度，卡片也不会压缩，用户可以横向滚动查看所有内容

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