Я сделал простой сайт в Bootstrap и использовал Bootstrap Carousel, но проблема в том, что элементы управления ползунком изображения мешают другим макетам на МАЛЕНЬКИХ УСТРОЙСТВАХ:
введите здесь описание изображения
Как вы можете видеть на этом изображении, два элемента управления попадают в синий div, так что это нехорошо, однако я использовал правильную систему столбцов Bootstrap:
<div class="row">
<div class="container">
<div class="col-md-3">
<div class="box">
<div class="header">
<h3 class="BHoma"><u><strong>اخبار سایت</strong></u></h3>
</div>
<div class="news">
<p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
<p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
<p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
<p class="BHoma"><a href="#">اخبار سایت در سایت</a></p>
</div>
<div class="down">
<hr>
<p class="BHoma"><a href="#"><< همه خبرها</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;" class="tales">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;" class="tales">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="images/slideshow/3.jpg" alt="New York" style="width:100%;" class="tales">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="box2">
<form class="form" action="" method="POST">
<p><input type="text" name="" placeholder=""></p>
<p><input type="submit" name="" value="Submit"></p>
</form>
</div>
</div>
</div>
</div>
Итак, у вас есть какие-либо идеи о том, как я могу это исправить?
Также вы можете зайти на сайт и протестировать его...