在手機上停止引導堆棧

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