如何将Bootstrap水平滚动卡片移动端默认显示从4个改为3个

问题说明 #

现有Bootstrap 4水平滚动卡片组件，移动端默认显示4张卡片，需调整为移动端显示3张，第4张及后续卡片通过横向滚动查看。

解决方案 #

利用Bootstrap的响应式列类，针对移动端断点设置卡片宽度为1/3，同时保留大屏幕下的原有布局：

1. 将卡片容器的col-3替换为col-4 col-md-3：
   • col-4：在移动端（xs断点，<576px）每个卡片占1/3宽度，刚好显示3张
   • col-md-3：在中等屏幕及以上（≥768px）保持原有25%宽度，显示4张
2. 确保滚动容器保留flex-nowrap类，维持横向排列不换行

修改后的完整代码 #

HTML部分

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

<div class="container-fluid">
  <h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>

  <p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
  <div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">

    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-1"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-2"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-3"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-4"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-5"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-6"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-7"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-8"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-9"></div>
    </div>
    <div class="col-4 col-md-3 px-2">
      <div class="card card-block card-10"></div>
    </div>
  </div>
</div>

CSS部分（无需修改，保留原有样式即可）

.scrolling-wrapper {
  overflow-x: auto;
}

body {
  background-color: black;
  color: #fff;
  font-family: 'system-ui';
}

h1 {
  font-weight: 700;
  font-size: 3.4em;
}

.subtitle {
  font-size: 1.25em;
  opacity: 0.65;
}

.card-block {
  height: 300px;
  background-color: #fff;
  border: none;
  background-position: center;
  background-size: cover;
  transition: all 0.2s ease-in-out !important;
  border-radius: 24px;
  &:hover {
    transform: translateY(-5px);
    box-shadow: none;
    opacity: 0.9;
  }
}

.card-1 {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.card-2 {
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card-3 {
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

.card-4 {
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

.card-5 {
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.card-6 {
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.card-7 {
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.card-8 {
  background-color: #FBDA61;
  background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}

.card-9 {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.card-10 {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

补充说明 #

• 添加px-2类是为了给卡片增加左右内边距，避免卡片之间过于紧凑，可根据需求调整或移除
• 若需要自定义断点，可替换col-md-3为其他Bootstrap断点类（如col-sm-3），适配不同屏幕尺寸

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