如何实现多个Bootstrap div元素的水平滚动效果？

问题原因 #

你现有代码的核心问题如下：

1. 滚动属性加错了层级：你把overflow-x加在了子元素.card上，而应该加在所有卡片列的直接父容器（.row元素）上
2. 属性拼写错误：你写的whitespace: nowrap少了横杠，正确写法是white-space: nowrap，而且该属性对flex布局的子元素不生效，Bootstrap的.row默认是flex布局，需要修改flex容器的换行属性
3. Bootstrap栅格默认会折行：.row默认带flex-wrap: wrap属性，子元素超出宽度后会自动换行，且响应式列类会自动压缩宽度，不会触发滚动

修复后的代码 #

CSS代码

/* 给承载所有卡片列的行容器加滚动配置 */
.scrollable-row {
  overflow-x: auto;
  /* 禁止flex子元素换行 */
  flex-wrap: nowrap;
  /* 如果需要隐藏滚动条可以打开下面两行注释 */
  /* scrollbar-width: none; */
}
/* .scrollable-row::-webkit-scrollbar {
  display: none;
} */

/* 固定每个卡片列的宽度，避免被自动压缩 */
.scrollable-row .card-col {
  /* 这里的25%代表一屏放4个卡片，超出就触发滚动，可自行调整数值 */
  flex: 0 0 25%;
  max-width: 25%;
}

.card{
  background-color:green;
  border:2px solid black;
}  
.card-body{
  background-color:green;
}

HTML代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
   <!-- 给行容器加自定义滚动类 -->
   <div class="row scrollable-row">
      <!-- 给每个列加自定义card-col类 -->
      <div class="card-col col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
     <div class="card-col col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
      <div class="card-col col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
      <div class="card-col col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
     <div class="card-col col-xl-3 col-md-6 mb-4">
         <div class="card h-100 py-2">
            <div class="card-body">
            </div>
         </div>
      </div>
   </div>
</div>

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