我有一个网页,其中某些标签(标签可以是 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> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
</a>
<span> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
</a>
<span> </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
现在,当我尝试检查响应式布局时,图标开始与“健康”、“健身”和“安全”标签重叠。我究竟做错了什么?如何解决这个问题?
最佳答案
删除 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> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
</a>
<span> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
</a>
<span> </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>
关于html - 在 Bootstrap 中检查响应时,图标向右对齐与居中对齐的标签重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44566835/