在手机上停止引导堆栈

Question

所以我在一行内有一行，以允许我定位3个按钮，在页面底部显示我喜欢的方式。它在桌面和平板电脑上看起来不错，但是在移动设备上它们堆叠起来，而col-xs-4 div是全宽而不是1/3的容器。有什么我可以改变，这样的圆不堆叠？

相关代码：

<div class="row buttonBottom"> 
     <div class="col-md-4 col-xs-2 col-sm-2"></div> 
     <div class="col-md-4 col-xs-8 col-sm-8"> 
      <div class="row"> 
      <div class="col-xs-3 col-sm-3 col-md-3"></div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle jetblack"></div> 
       </div> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle gold"></div> 
       </div> 
      </div> 
      <div class="col-xs-2 col-sm-2 col-md-2"> 
       <div class="wrap-circle"> 
       <div class="circle white"></div> 
       </div> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"></div> 
      </div> 
     </div> 
     <div class="col-md-4 col-xs-2 col-sm-2"></div> 
     </div> 

Answer 1

只需添加一个额外的类，而不在类名-xs-文本。

<div class="col-2 col-xs-2 col-sm-2 col-md-2"> 

检查出的文档：https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes