bootstrap carousel会扰乱某些页面上的叠加层

Question

我制作了一个有近百页的模板。在一些博客页面上，bootstrap轮播会扰乱页面的标题。 每当旋转木马滑动时，标题的覆盖物会在某处消失几秒钟然后再返回。

访问http://symmetry.creativecube.pk/full-page-blog-full-width.html

请帮助我解决这个非常有用的问题。除了四页博客之外，所有其他页面上的标题和轮播都正常工作。

<div class="row first-div marginN0" style="background-image:url('assets/images/header-12.jpg')"><!-- Cover -->
        <!-- Cover -->
        <div class="" id="first-div-cover"> 
            <div class="page-main-heading">
                <div class="text-center">
                    <h1>Blog</h1>
                    <h5>This is some text written under the heading.</h5>
                </div>
            </div>
        </div> 
        <!-- Cover  -->
    </div>
    <section>
        <div class="row">
            <div class='container portfolio padding100'>
                <h3 class="col-sm-12"><span class="color-grey">04 OCT </span>BEAUTIFULL CAROUSEL IN BLOG</h3>
                <div class="col-sm-12 service-text height-50">  
                  <ul class="blog padding0"> 
                    <li><i class="fa fa-calendar"></i><a href="#">16th February 2015</a>/</li>
                    <li><i class="fa fa-comments"></i><a href="#">20</a>/</li>
                    <li><a href="#">Illustrations</a>,<a href="#">Design</a></li>
                  </ul>                               
                </div>
                <div class ="col-sm-12 ">
                    <p>
                        Suspendisse tincidunt eget ipsum non placerat. Donec mattis commodo sapien non pellentesque. Ut convallis magna ut erat iaculis sollicitudin at vel est. In semper odio quis consequat sollicitudin. Cras sed interdum arcu, eget egestas tellus. Donec vitae nisl ut tortor suscipit convallis mattis sed dui. Fusce interdum neque quis mattis volutpat. Morbi accumsan fermentum eros eu blandit. Vestibulum sem elit, varius sed lectus eget, vehicula dignissim nunc. Cras bibendum erat ut dolor convallis, a ornare odio vehicula. Sed blandit, massa in pulvinar fermentum, metus diam sodales mauris, quis vestibulum lectus odio ut est.
                    </p>
                </div>
                <div class = "col-xs-12 col-sm-12 col-md-12 col-lg-12 padding50">
                    <article class='portfolio-items'>
                        <div class="row marginN0">
                            <div id='myCarousel' class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>
                                </ol>

                                    <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <a class="zoom-picture n1" href="assets/images/blog/BL5.jpg">
                                            <img alt="image" src="assets/images/blog/BL5.jpg">
                                        </a>
                                    </div> 

                                    <div class="item">
                                        <a class="zoom-picture n1" href="assets/images/blog/BL1.jpg">
                                            <img alt="image" src="assets/images/blog/BL5.jpg">
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a class="zoom-picture n1" href="assets/images/blog/BL15.jpg">
                                            <img alt="image" src="assets/images/blog/BL5.jpg">
                                        </a>
                                    </div>
                                    <div class="item">
                                        <a class="zoom-picture n1" href="assets/images/blog/BL2.jpg">
                                            <img alt="image" src="assets/images/blog/BL5.jpg">
                                        </a>
                                    </div>
                                </div>

                                <!-- Left and right controls -->
                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>

                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            </div>
                    </article>
                </div>