どんな助けでも大歓迎です。
ここに私のサイトがあります: 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">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->