Question

由于我在我的网站上添加了一个bootstrap轮播，所有标签突然停止工作。有谁知道我怎么解决它？这是我的代码。

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类position: absolute中删除top: 0%和thingy，如下所示：

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

Answer 2

你。这个班级与链接重叠！所以要么将它们放低一点，要么将Nav的Z指数提高到比它更高。！

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

OR

.thingy {
 top:24px;
}

并删除以下代码

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

Bootstrap轮播可防止锚标签工作

2 个答案: