当屏幕缩小时，Font Awesome 堆叠图标消失

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>