使用css创建多行水平可滚动固定宽度列网格

Question

我在bootstrap网格布局中有一个可变数量的输入框，其中有四列col-md-3列，如下图所示。

一旦显示12个名字（4列x 3行），我希望此网格水平滚动。因此，根据此网格，一旦用户向右滚动，最后两个名称将被列为前两个输入元素，而不是显示页面中的所有名称。

Image of the grid I currently have

任何解决方案都可以！然而，flexbox解决方案会很棒！

干杯！

代码：

<div class="card-body">
  <form id="sterilizeForm" class="form-group ">
    <div class="row mx-2 mt-2 cleaners">
      @foreach( $cleaners as $key => $cleaner )
          <div class="cleaner col-md-3 span4 input-group mb-3">
              <div class="input-group-prepend">
                  <span class="input-group-text" id="{{$cleaner->id}}">
                      {{$cleaner->name}}
                  </span>
              </div>

              <select name="options" class="">
                     <option value=''>Select one</option>
              </select>

          </div>
      @endforeach()
    </div>
    
   <button  class="log d-flex btn btn-primary btn-lg " type='submit'>
      Print
   </button>
 </form> 
</div>