我正在开发网站，在网站中有 2 张图像，我正在垂直获取两张图像，但我需要两张水平图像和动画。我正在使用 bootstrap 水平拍摄图像，但是每当我在文件中插入 bootstrap 插件 (bootstrap.min.css) 时，我的两个图像都会自动隐藏。请帮助我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scroll effects with CSS animation</title>
<meta name="description" content="Page scroll animation using CSS animate" />
<meta name="keywords" content="css animation, loading effect, animate, scroll loading, scroll animation" />
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="animate.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" href="style.css" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<section class="hero overlay" data-stellar-background-ratio="0.3">
</section>
<section class="wrapper">
<div class="container">
<h2> Sport</h2>
<p>Subheading Subheading Subheading</p>
</br></br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</br>
<div class="col-md-6">
<div class="post">
<div class="box " >
<img src="img/section1.jpg" alt="" style="height:300px;width:400px; ">
<h4>Learn to sail Camps & Events at H20</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div> </div>
</div>
<div class="col-md-6">
<div class="post2">
<div class="box">
<img src="img/section2.jpg" alt="" style="height:300px;width:400px;">
<h4> My First Sailing Experience</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</section>
<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="viewportchecker.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden1").viewportChecker({
classToAdd: 'visible animated slideInLeft', // Class to add to the elements when they are visible
offset: 100
});
});
jQuery(document).ready(function() {
jQuery('.post2').addClass("hidden1").viewportChecker({
classToAdd: 'visible animated slideInRight', // Class to add to the elements when they are visible
offset: 100
});
});
</script>
</body>
</html>
最佳答案
请尝试在脚本中使用其他类名而不是“隐藏”。在动画“隐藏”类被添加到 <div class="post"> 之后由于该元素在应用 bootstrap.min.css 后被隐藏
关于javascript - bootstrap.min.css 文件不支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31914791/