字体真棒堆叠图标随着屏幕缩小而消失

Question

我正在处理一个希望用户单击配色方案的表单。 我正在使用引导程序，并且正在使用圆形字体很棒的图标来做到这一点。 单击它时，将出现一个新的字体超赞图标，该图标会堆叠在一起。 我注意到，当页面缩小到某一点时，被“单击”的一个图标消失了。

我知道这是由于图标堆叠引起的，但我不了解其根本原因。 我该怎么做才能解决此问题？

这是正常分辨率下的屏幕截图：

这是我缩小页面的时间：

这是代码：

 <div class="row pb-4"> <div class="col-md-2 offset-md-2 text-center"> <i class="fas fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if=" this.headClass !== 'bc-header-red' "></i> <i class="fas fa-circle fa-stack-2x" style="color: #D1504F;" v-if=" this.headClass === 'bc-header-red' "></i> <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-red' "></i> </div> <div class="col-md-2 text-center"> <i class="fas fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass !== 'bc-header-blue' "></i> <i class="fas fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass === 'bc-header-blue' "></i> <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-blue' "></i> </div> <div class="col-md-2 text-center"> <i class="fas fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass !== 'bc-header-green' "></i> <i class="fas fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass === 'bc-header-green' "></i> <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-green' "></i> </div> <div class="col-md-2 text-center"> <i class="fas fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass !== 'bc-header-yellow' "></i> <i class="fas fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass === 'bc-header-yellow' "></i> <i class="far fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-yellow' "></i> </div> </div> 

Answer 1

无法根据您提供的信息来复制方案...但是，如果您怀疑垂直堆栈与它有关，为什么不将其保持水平...就像下面的代码：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="row pb-4 justify-content"> <div class="col-md-2 col-2 offset-md-2 offset-2 text-center"> <i class="fa fa-circle fa-2x" style="color: #D1504F;" @click="setRed()" v-if=" this.headClass !== 'bc-header-red' "></i> <i class="fa fa-circle fa-stack-2x" style="color: #D1504F;" v-if=" this.headClass === 'bc-header-red' "></i> <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-red' "></i> </div> <div class="col-md-2 col-2 text-center"> <i class="fa fa-circle fa-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass !== 'bc-header-blue' "></i> <i class="fa fa-circle fa-stack-2x" style="color: #4FA1D1;" @click="setBlue()" v-if=" this.headClass === 'bc-header-blue' "></i> <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-blue' "></i> </div> <div class="col-md-2 col-2 text-center"> <i class="fa fa-circle fa-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass !== 'bc-header-green' "></i> <i class="fa fa-circle fa-stack-2x" style="color: #4FD17C;" @click="setGreen()" v-if=" this.headClass === 'bc-header-green' "></i> <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-green' "></i> </div> <div class="col-md-2 col-2 text-center"> <i class="fa fa-circle fa-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass !== 'bc-header-yellow' "></i> <i class="fa fa-circle fa-stack-2x" style="color: #FFCD2B;" @click="setYellow()" v-if=" this.headClass === 'bc-header-yellow' "></i> <i class="fa fa-circle fa-stack-2x" v-if=" this.headClass === 'bc-header-yellow' "></i> </div> </div>