0

どんな助けでも大歓迎です。

ここに私のサイトがあります: http://www.boriskdesign.com

767 ピクセル (スマートフォン サイズ) で、カルーセルの左右のボタンをクリックできないことを除いて、すべてが完璧です。「Contact Me」という黄色のボタンも同様です。

どうしたの?

767 Media Query のコードは次のとおりです。

@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