同位素项目不起作用

Question

我已经在我的Bootstrap网站上添加了同位素插件，但是同位素网格不起作用。我该如何解决？我已经在Wordpress网站上使用了相同的代码和样式，并且一切都很好。问题在于，就我而言，同位素似乎没有添加其类。但是我不知道为什么。

**！一切在这里都可以正常工作，但是此代码和css确实在我的html文件中不起作用！ **

谢谢

$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){

  /* activate jquery isotope */
  $('#posts').imagesLoaded( function(){
    $('#posts').isotope({
      itemSelector : '.item'
    });
  });
  
});

#blog-post h1, #blog-post h2, #blog-post h3, #blog-post h4, #blog-post h5, #blog-post h6, #blog-post p {
    color: #fff;
} 
.post-meta {
    padding-top: 100px;
}
.post__social {
    margin-top: -6px;
}
.col-no-padding {
    padding: 0;}
span.tags {
    color: #fff;
    font-size: 11px;
    display: block;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.7px;
}
span.tags a {
    background-color: #5a7799;
    padding: 2px;
    border-radius: 5px;
    font-size: 11px;
    color: #e0e0e0;
    font-weight: 400;
}
#blog-post h1 {
    font-size: 32px;
    line-height: 30px;
    text-align: left;
}
#blog-post p {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.2px;
    padding-bottom: 8px;
}
#blog-post {
    background: #4c4c84;
}
#blog-post .thumbnail_wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
#blog-post .blog_post--content {
    background: #3276b5;
    padding: 0;
}
.blog_post--content_wrapper {
    padding: 46px;
}
#posts .well {
    background: #3276b4;
    padding: 0;
    border: none !important;
    border-radius: 0;
}
#posts .col-sm-6 {
    padding-left: 10px;
    padding-right: 10px;
}
#posts .well h2 {
    color: #7F7F7F;
    font-size: 24px;
    line-height: 24px !important;
    text-align: left;
    margin-bottom: 0;
    margin-top: 10px;
}
#posts .well h2 a {
    color: #fff;
}
#posts .well h2 a:hover {
    color: #ffa600;
}
#posts .well a.readmore {
    color: #fc8f00;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #fc8f00 !important;
}
span.readmore_after i.fa {
    color: #fc8f00;
    font-size: 12px;
}
#posts .well a.readmore:hover {
    color: #fff;
    border-color: #fff !important;
}
#posts .well p {
    color: #fff;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.2px;
}
#posts .well span.date, .blog_post--content_wrapper span.date {
    color: #fff;
    font-size: 12px;
    display: block;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}
.blog_post--wrapper {
    padding: 40px 25px 30px 25px;
}
#posts .well img {
    width: 100%;
    height: auto;
}
.isotope {
    height: auto;
}
div#masonry { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap;
    height: 100vw;
    font-size: 0;  
}
div#masonry .item {  
    width: 33.3%;
    transition: .8s opacity;
} 

/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
    div#masonry { display: block; }
    div#masonry .item {  
    display: inline-block;
    vertical-align: top;
  }
}


@media (max-width: 768px) {

  .isotope .item {
    position: static ! important;
    -webkit-transform: translate(0px, 0px) ! important;
       -moz-transform: translate(0px, 0px) ! important;
            transform: translate(0px, 0px) ! important;
  }
}

/* --------- Isotope Transitions --------- */
.isotope,
.isotope .item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

img.references-img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/main.css" rel="stylesheet"/>
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" data-target="#myNavbar">
            <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>
        </div><!-- mobile collapse -->
        <div class="collapse navbar-collapse" id="navMain">
            <ul class="nav navbar-nav pull-right custom-pull">
                <li><a href="index.html">Home</a></li>
                <li><a href="us.html">Us</a></li>
                <li><a href="how-it-works.html">How it Works</a></li>
                <li><a href="packages.html">Packages</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="blog.html" class="active">Blog</a></li>
                <li><a class="link__cta" href="contact.html">Book a free chat today</a></li>
            </ul>
        </div><!-- main menu -->
    </div>
</nav>

<section id="blog-post" class="text-center">
    <div class="content">            
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="header__section">
                        <h2>Testimonials</h2>
                        <hr class="title">
                    </div>
                </div>
            </div><!-- row -->  
            <div id="posts" class="row"> 
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
            </div><!-- row -->                          
        </div><!-- container -->
    </div><!-- content -->
</section><!-- how-section -->


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</body>
</html>

$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){

  /* activate jquery isotope */
  $('#posts').imagesLoaded( function(){
    $('#posts').isotope({
      itemSelector : '.item'
    });
  });
  
});

#blog-post h1, #blog-post h2, #blog-post h3, #blog-post h4, #blog-post h5, #blog-post h6, #blog-post p {
    color: #fff;
} 
.post-meta {
    padding-top: 100px;
}
.post__social {
    margin-top: -6px;
}
.col-no-padding {
    padding: 0;}
span.tags {
    color: #fff;
    font-size: 11px;
    display: block;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.7px;
}
span.tags a {
    background-color: #5a7799;
    padding: 2px;
    border-radius: 5px;
    font-size: 11px;
    color: #e0e0e0;
    font-weight: 400;
}
#blog-post h1 {
    font-size: 32px;
    line-height: 30px;
    text-align: left;
}
#blog-post p {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.2px;
    padding-bottom: 8px;
}
#blog-post {
    background: #4c4c84;
}
#blog-post .thumbnail_wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
#blog-post .blog_post--content {
    background: #3276b5;
    padding: 0;
}
.blog_post--content_wrapper {
    padding: 46px;
}
#posts .well {
    background: #3276b4;
    padding: 0;
    border: none !important;
    border-radius: 0;
}
#posts .col-sm-6 {
    padding-left: 10px;
    padding-right: 10px;
}
#posts .well h2 {
    color: #7F7F7F;
    font-size: 24px;
    line-height: 24px !important;
    text-align: left;
    margin-bottom: 0;
    margin-top: 10px;
}
#posts .well h2 a {
    color: #fff;
}
#posts .well h2 a:hover {
    color: #ffa600;
}
#posts .well a.readmore {
    color: #fc8f00;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #fc8f00 !important;
}
span.readmore_after i.fa {
    color: #fc8f00;
    font-size: 12px;
}
#posts .well a.readmore:hover {
    color: #fff;
    border-color: #fff !important;
}
#posts .well p {
    color: #fff;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    letter-spacing: 0.2px;
}
#posts .well span.date, .blog_post--content_wrapper span.date {
    color: #fff;
    font-size: 12px;
    display: block;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}
.blog_post--wrapper {
    padding: 40px 25px 30px 25px;
}
#posts .well img {
    width: 100%;
    height: auto;
}
.isotope {
    height: auto;
}
div#masonry { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap;
    height: 100vw;
    font-size: 0;  
}
div#masonry .item {  
    width: 33.3%;
    transition: .8s opacity;
} 

/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
    div#masonry { display: block; }
    div#masonry .item {  
    display: inline-block;
    vertical-align: top;
  }
}


@media (max-width: 768px) {

  .isotope .item {
    position: static ! important;
    -webkit-transform: translate(0px, 0px) ! important;
       -moz-transform: translate(0px, 0px) ! important;
            transform: translate(0px, 0px) ! important;
  }
}

/* --------- Isotope Transitions --------- */
.isotope,
.isotope .item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

img.references-img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/main.css" rel="stylesheet"/>
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" data-target="#myNavbar">
            <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>
        </div><!-- mobile collapse -->
        <div class="collapse navbar-collapse" id="navMain">
            <ul class="nav navbar-nav pull-right custom-pull">
                <li><a href="index.html">Home</a></li>
                <li><a href="us.html">Us</a></li>
                <li><a href="how-it-works.html">How it Works</a></li>
                <li><a href="packages.html">Packages</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="blog.html" class="active">Blog</a></li>
                <li><a class="link__cta" href="contact.html">Book a free chat today</a></li>
            </ul>
        </div><!-- main menu -->
    </div>
</nav>

<section id="blog-post" class="text-center">
    <div class="content">            
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="header__section">
                        <h2>Testimonials</h2>
                        <hr class="title">
                    </div>
                </div>
            </div><!-- row -->  
            <div id="posts" class="row"> 
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
                <div class="item col-sm-6">
                    <div class="well">
                       <a href="post.html"><img src="assets/images/carousel__demo-1.jpg" class="img-responsiev" alt=""></a>
                        <div class="blog_post--wrapper">
                            <span class="date">Date</span>
                            <h3><a href="post.html">Blog Post Title</a></h3>
                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            <div class="readmore-wrapper">
                                <a class="readmore" href="post.html">Read More</a>
                                <span class="readmore_after">
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </span>
                            </div> <!-- .readmore-wrapper -->
                        </div> <!-- .blog_post--wrapper -->
                    </div> <!-- well -->
                </div> <!-- blog post item -->
            </div><!-- row -->                          
        </div><!-- container -->
    </div><!-- content -->
</section><!-- how-section -->


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</body>
</html>