Question

非常感谢任何帮助。

这是我的网站：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 -->

Answer 1

您的轮播控件功能正常，但它们位于div下方。我在你的左右旋转木马控件上快速定义了一个z-index，以使它们正常工作。

767px媒体查询的响应轮播问题 - 轮播左/右按钮和Btn按钮不起作用

1 个答案: