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

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

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

<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>