bootstrap.min.css文件不支持

Question

I am developing website, In the website there is 2 images and both images i am getting vertically but i need both images horizontally with animate. 我正在开发网站，在该网站中有2张图像，并且两个图像我都在垂直放置，但是我需要水平地使用动画设置两个图像。 I am using bootstrap for taking the images horizontally but whenever i am inserting the bootstrap plugin (bootstrap.min.css) in the file my both images automatically hide.Please help me in this 我正在使用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>

Answer 1

Please try to use other class name instead of 'hidden' in the script. 请尝试在脚本中使用其他类名代替“ hidden”。 After the animation 'hidden' class is getting added to <div class="post"> due to which the element is getting hidden after applying bootstrap.min.css 在将动画“隐藏”类添加到<div class="post">由于在应用bootstrap.min.css之后该元素被隐藏了

Answer 2

只是您这个<link> ： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Answer 3

Load your bootstrap css first and then your other styles: 首先加载您的引导CSS，然后再加载其他样式：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//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" />

Answer 4

Did you include 你包括了吗

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

before you bootstrap.min.js call? 在bootstrap.min.js调用之前？

Answer 5

If you look at the source of your site you can see that bootstrap.min.css isn't loading at all. 如果查看网站的源代码，您会看到bootstrap.min.css根本没有加载。 Look at at your code, you forgot to add some close-bracket to your link tag: 查看您的代码，您忘了在链接标记中添加一些右括号：

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

Try to change it to: 尝试将其更改为：

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

Also I would suggest to load your bootstrap.css first and after that add your own .css files. 我也建议先加载您的bootstrap.css，然后再添加您自己的.css文件。

bootstrap.min.css文件不支持

问题描述

5 个解决方案

解决方案1
1 已采纳 2015-08-10 08:35:08

解决方案2
0 2015-08-10 08:29:48

解决方案3
0 2015-08-10 08:32:59

解决方案4
0 2015-08-10 09:00:01

解决方案5
-1 2015-08-10 08:31:10

bootstrap.min.css文件不支持

问题描述

5 个解决方案

解决方案1 1 已采纳 2015-08-10 08:35:08

解决方案2 0 2015-08-10 08:29:48

解决方案3 0 2015-08-10 08:32:59

解决方案4 0 2015-08-10 09:00:01

解决方案5 -1 2015-08-10 08:31:10

解决方案1
1 已采纳 2015-08-10 08:35:08

解决方案2
0 2015-08-10 08:29:48

解决方案3
0 2015-08-10 08:32:59

解决方案4
0 2015-08-10 09:00:01

解决方案5
-1 2015-08-10 08:31:10