html - Font Awesome 堆叠图标随着屏幕缩小而消失

Question

我正在处理一个表单，我希望用户在其中单击配色方案。我正在使用 bootstrap 并且我正在使用圆形字体很棒的图标来执行此操作。单击它时，会出现一个堆叠的新 Font Awesome 图标。我注意到当页面缩小到某一点时，“单击”的那个图标消失了。

我知道是因为图标被堆叠导致的，但是我不明白这个的根本原因。我该怎么做才能解决这个问题？

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

这是我缩小页面时的样子:

代码如下:

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