Hallo Freunde ich benutze Bootstrap 3 Carousal. Ich stehe einmal Problem in Mobile, wenn der mobile Bildschirm ist < = 4 Zoll. Die Beschriftung meines Schiebereglers ist auf dem kleineren Bildschirm auf der linken Seite versteckt. bitte hilfe.Bootstrap Karussell Beschriftung versteckt sich auf dem mobilen Bildschirm, wenn Bildschirmgröße <= 4 Zoll
Code:
<div id="kc1" class="carousel " data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators hidden-xs">
<li data-target="#kc1" data-slide-to="0" class="active"></li>
<li data-target="#kc1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="websites">
<a href="websites-systems-trainings.php"><img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0"></a>
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1" style="background-color:#004080;">
<h1 style="font-size:25px;">This is test example and half caption is hiding in left side on mobile device below <=4 inch screen </h1>
<h6>
<a href="websites-systems-trainings.php" class="btn-default btn-sm">More</a>
</h6>
</div>
</div>
<div class="item" id="SEO-SEM">
<a href="seo-sem-ppc.php"> <img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1"></a>
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2" style="background-color:#000;">
<h2> This is test example and half caption is hiding in left side on mobile device below <=4 inch screen</h2>
<h6> <a href="seo-sem-ppc.php" class="btn-default btn-sm">More</a> </h6>
</div>
</div>
</div>
<a class="left carousel-control" href="#kc1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#kc1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
<!-- carousel css-->
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
btn-clear:hover {
color: #000;
background-color: #6699CC;
}
#kc1
{
border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
/* added by kk */
overflow: hidden;
/* added by kk */
margin-top: 1px;
min-height: 300px;
min-width: 100%;
}
#kc1 img {
min-height: 300px;
min-width: 100%;
}
#kc1 > .carousel-indicators > li {
border-radius: 2px;
min-width: 2px;
background-color:#D4FF00;
border: 1px solid black;
margin-right: 1px;;
margin-left: 1px;;
}
#kc1 > .carousel-indicators > .active {
background-color:#2AFF00;
}
#kc1 .carousel-caption {
color: blue;
right: 50%;
text-align: center;
background:#fff;
left: auto;
top:12%;
bottom: initial;
transform: translateY(-50%);
transform:translateX(50%);
color:#FFF;
max-width: 1200px;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-
}
</style>
Hier ist ein jsfiddle Klärungs
Haben Sie Ihre Situation herausgefunden? Haben Sie sich darum gekümmert, zu dem erwähnten Code in meiner Antwort zu gehen, um das Problem zu lösen, das Sie hatten? – Edward