Bootstrap传送带防止锚标签工作

Question

由于我在我的网站上添加了引导传送带，所有标签突然停止工作。有谁知道我该如何修复它？这是我的代码。

body {} .nav { 
 
    width: 100%; 
 
    height: 1%; 
 
    background-color: #d2d6d5; 
 
    z-index: 5; 
 
} 
 
.awesomelinks { 
 
    color: #000000; 
 
    font-size: 18px; 
 
    padding: 7%; 
 
    display: inline; 
 
    z-index: 2; 
 
    margin-top: 15px; 
 
} 
 
.awesomelinks:hover { 
 
    color: rgba(57, 196, 232, 1.00); 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
} 
 
#about { 
 
    margin-left: 0%; 
 
} 
 
.thingy { 
 
    position: absolute; 
 
    top: 0%; 
 
    width: 100%; 
 
} 
 
.carousel { 
 
    position: asbolute; 
 
    top: 24px; 
 
} 
 
.first-slide { 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 
.second-slide { 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 
.third-slide { 
 
    width: 100%; 
 
    z-index: -1; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div class="nav"> 
 
    <a href="About-Us.html" class="awesomelinks" id="about">About   Us</a> 
 
    <a href="Donations.html" class="awesomelinks" id="donate">Donate</a> 
 
    <a href="Our-Team.html" class="awesomelinks" id="team">Our Team</a> 
 
    <a href="Media.html" class="awesomelinks" id="media">Media</a> 
 
    <a href="mailto:utunicyclingsociety@gmail.com" target="_blank" id="contact" class="awesomelinks">Contact Us <img src="Jump Around.gif"/>    </a> 
 
</div> 
 
<div class="thingy"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="2" class="active"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item"> 
 
     <img class="first-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="First slide"> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Utah Unicycling Society</h1> 
 
      <p>Text here</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img class="second-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="Second slide"> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1></h1> 
 
      <p></p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item active"> 
 
     <img class="third-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="Third slide"> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1></h1> 
 
      <p></p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

余吨将是一个巨大的帮助，如果有人帮我在这。非常感谢。

Answer 1

您有一个简单的CSS错误。从CSS类thingy删除position: absolute和top: 0%，这样的：

.thingy { 
    /* position: absolute; */ 
    /* top: 0%; */ 
    width: 100%; 
} 

Answer 2

你.thingy类与链接重叠！所以要么把它们放低一点，要么增加Nav的Z-index高于thingy。

.nav { 
    position: relative; 
    z-index: 100; 
} 

OR

.thingy { 
top:24px; 
} 

和你删除你的下面的代码

.carousel { 
    position: asbolute; 
    top: 24px; 
}