ブートストラップカルーセルのキャプションは、画面サイズが<= 4インチの場合、モバイル画面に隠れています

Question

こんにちは友人私はブートストラップ3カラフルを使用しています。モバイル画面が< = 4インチのとき、私は一度モバイルに問題があります。私のスライダのキャプションは、小さな画面の左側に半分隠れています。助けてください。

コード：

<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> 

はここカルーセル内のキャプションは、実際にこの部分の下site.cssファイルで制御されている明確

Answer 1

ためjsfiddleです：

/* Hide/rearrange for smaller screens */ 
@media screen and (max-width: 767px) { 
    /* Hide captions */ 
    .carousel-caption { 
    display: none 
    } 

}