html - 在 Bootstrap 中检查响应时，图标向右对齐与居中对齐的标签重叠

Question

我有一个网页，其中某些标签(标签可以是 n 编号)居中对齐。我将三个固定图标(微笑、心形和星星)右对齐。看起来不错，但是当我检查响应式布局(针对手机)时，图标没有下降到下一行，而是与标签重叠。下面是代码:

HTML

<div class="row">
  <div class="col-lg-12" style="text-align: center">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>
    <span>&nbsp;</span>
    <span class="animated-icons">
      <a href="#"><i class="fa fa-smile-o faa-bounce fa-2x animated"></i></a> 30
      <a href="#"><i class="fa fa-heart faa-pulse animated"></i></a> 10
      <a href="#"><i class="fa fa-star faa-vertical fa-2x animated"></i></a> 20
    </span>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <h1 class="post-header" style="text-align: center">This is the header</h1>
  </div>
</div>

CSS

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite !important;
  animation: pulse 2s linear infinite !important;
  font-size:1.8em;  
}
.fa-heart {
    color: red !important;
}
.fa-star {
    color: gold !important;
}
.fa-smile-o {
  color: deeppink !important;
}

@-webkit-keyframes bounce {
  0%, 10%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 10%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
  -webkit-animation: bounce 2s ease infinite;
  animation: bounce 2s ease infinite;
}
 @-webkit-keyframes vertical {
  0% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  4% {
   -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  8% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  12% {
    -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  16% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  20% {
    -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  22% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  4% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  8% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  12% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  16% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  20% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  22% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
  -webkit-animation: vertical 2s ease infinite;
  animation: vertical 2s ease infinite;
}
.animated-icons {
  position: absolute;
  right: 20px;
}

这是 Demo

现在，当我尝试检查响应式布局时，图标开始与“健康”、“健身”和“安全”标签重叠。我究竟做错了什么？如何解决这个问题？

Answer 1

删除 position 并使 span 标记呈现为 block 元素，或者您也可以使用 margin属性(property)。所有这些都在 media-query

中

/* CSS used here will be applied after bootstrap.css */

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover>.faa-pulse {
  -webkit-animation: pulse 2s linear infinite !important;
  animation: pulse 2s linear infinite !important;
  font-size: 1.8em;
}

.fa-heart {
  color: red !important;
}

.fa-star {
  color: gold !important;
}

.fa-smile-o {
  color: deeppink !important;
}

@-webkit-keyframes bounce {
  0%,
  10%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%,
  10%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover>.faa-bounce {
  -webkit-animation: bounce 2s ease infinite;
  animation: bounce 2s ease infinite;
}

@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  4% {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  8% {
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  12% {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  16% {
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  20% {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  22% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translate(0, -3px);
    -ms-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  4% {
    -webkit-transform: translate(0, 3px);
    -ms-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  8% {
    -webkit-transform: translate(0, -3px);
    -ms-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  12% {
    -webkit-transform: translate(0, 3px);
    -ms-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  16% {
    -webkit-transform: translate(0, -3px);
    -ms-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  20% {
    -webkit-transform: translate(0, 3px);
    -ms-transform: translate(0, 3px);
    transform: translate(0, 3px);
  }
  22% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover>.faa-vertical {
  -webkit-animation: vertical 2s ease infinite;
  animation: vertical 2s ease infinite;
}

.animated-icons {
  position: absolute;
  right: 20px;
}

@media (max-width: 490px) {
  .animated-icons {
    position: static;
    display: block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-12" style="text-align: center">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>
    <span>&nbsp;</span>
    <span class="animated-icons">
      <a href="#"><i class="fa fa-smile-o faa-bounce fa-2x animated"></i></a> 30
      <a href="#"><i class="fa fa-heart faa-pulse animated"></i></a> 10
      <a href="#"><i class="fa fa-star faa-vertical fa-2x animated"></i></a> 20
    </span>

  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <h1 class="post-header" style="text-align: center">This is the header</h1>
  </div>
</div>