>

특정 태그가있는 웹 페이지가 있습니다 (태그는 n 일 수 있음)  숫자) 중앙에 정렬됩니다. 오른쪽에 세 개의 고정 아이콘 (Smile, Heart 및 Star)이 있습니다. 괜찮아 보이지만 반응 형 레이아웃 (휴대 전화의 경우)을 확인한 다음 다음 줄로 이동하는 대신 아이콘이 태그와 겹칩니다. 아래는 코드입니다 :

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

다음은 데모

입니다.

이제 반응 형 레이아웃을 확인하려고하면 아이콘이 "Health", "Fitness"및 "Safety"태그와 겹치기 시작합니다. 내가 무엇을 잘못하고 있지? 이 문제를 해결하는 방법?


  • 답변 # 1

    position 를 제거  그리고 그 span 를  태그는 block 로 렌더링  요소 또는 margin 를 사용할 수도 있습니다  재산. 이 모든 것은 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>
    
    

  • 답변 # 2

    모바일보기에 다음 CSS를 사용할 수 있습니다

    @media only screen and (max-width: 767px) {    
        .animated-icons{
            position:relative
         }
    }
    
    

  • 이전 javascript - Angular-CLI 스크립트에 Handsontable을 추가 할 때 ZoneAwarePromise를 덮어 씁니다
  • 다음 Rails 503을 사용하고 있으며 루비 233을 고안하고 Rails를 처음 접합니다