0

任何帮助将不胜感激。

这是我的网站： http: //www.boriskdesign.com

一切都很完美，除了 767px（智能手机尺寸），Carousel 的左右按钮不可点击。显示“联系我”的黄色按钮也是如此。

这是怎么回事？

这是 767 媒体查询的代码：

@media (max-width: 767px) {

  .container {
    margin-bottom: 60%;
  }

  div.footer_right_border {
  border-right: none;
  }

  div.footer_right_border {
      visibility: none;
  }

  .navbar-inverse .navbar-inner {
    margin-top: -13%;
  }

  .navbar-inner {
    margin-top: -20px;
    margin: -20px;
  }
  .carousel {
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 7%;
  }

  .carousel .container {
    padding-top: 20px;       
  }

  .carousel .item {
    height: 300px;
  }
  .carousel img {
    width: auto;
    height: 300px;
  }
  .carousel-caption {
    width: 300px;
    padding: 0 70px;
    margin-top: 15px;
  }
  .carousel-caption h1 {
    font-size: 2em;
  }
  .carousel-caption .lead,
  .carousel-caption .btn {
    font-size: 18px;
  }
  .btn-custom {
    position: relative;
    z-index: 19;
  }
  .marketing .span4 + .span4 {
    margin-top: 40px;
  }

  .featurette-heading {
    font-size: 30px;
  }
  .featurette .lead {
    font-size: 18px;
    line-height: 1.5;
  }

}

旋转木马的代码：

<!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/carousel/all_devices.jpg" style="opacity: .9;"   class="img_car">
          <div class="container">
            <div class="carousel-caption">
              <h1>Responsive Web Design</h1>
              <p class="lead">For all devices under the sun.</p>
              <br><br><a class="btn btn-large btn-primary btn-custom" href="contact.html">Contact Me</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="images/carousel/rn.jpg" alt="" class="img_car">
          <div class="container">
            <div class="carousel-caption">
              <h1>The Rita & Naum Orchestra</h1>
              <p class="lead">Website for the Russian-American band.</p>
              <br><br><a class="btn btn-large btn-primary btn-custom" href="web.html">Browse Gallery</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="images/carousel/mrk.jpg" alt="" class="img_car">
          <div class="container">
            <div class="carousel-caption">
              <h1>Mr. K Tutoring</h1>
              <p class="lead">Made with Twitter Bootstrap Responsive.</p>
              <br><br><a class="btn btn-large btn-primary btn-custom" href="web.html">Browse gallery</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="images/carousel/rf.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>DJ Ricky Flood</h1>
              <p class="lead">Website for the new, hot New York DJ.</p>
              <br><br><a class="btn btn-large btn-primary btn-custom" href="web.html">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div><!-- /.carousel -->
4

1 回答 1

1

您的轮播控件运行正常，但它们位于 div 下方。我很快在你的左右轮播控件上定义了一个 z-index 来让它们工作。

于 2013-08-22T18:10:37.497 回答