Responsove Bootstrapカルーセル

Question

私はBootstrap Carouselの設定に問題があります。これは私が持っているコードです：

<div id="slider" class="slider carousel slide"> 
<div class="carousel-inner" align="center"> 
<div class="item active"> 
<div style="display: flex;flex-direction:row; justify-content: center; align-items: center;"> 
<div><p style="font-family:'Aleo';color: #4e4c4a;font-size: 13vw;top:-30px;position:relative;">AR111</p><p style="font-family:'Aleo';color: #4e4c4a;font-size: 2vw;top:-80px;position:relative;">Description of the product enters here <br> approximately 2 lines</p></div> 
<div style=""><img src="imagens/ar111.png" class="img-responsive"></div> 
</div> 
</div> 
<div class="item"> 

</div> 
<div class="item"> 
</div> 
</div> 
<a class="left carousel-control" href="#slider" data-slide="prev"> 
<span class="glyphicon glyphicon-circle-arrow-left"></span> 
</a> 
<a class="right carousel-control" href="#slider" data-slide="next"> 
<span class="glyphicon glyphicon-circle-arrow-right"></span> 
</a> 
</div> 

And this is how i want the slider to look like in all screensです。

ここでは、ライブです：http://www.felipegrin.com/testing

あなたが見ることができるように、それは画面の解像度に応じて台無し。 Flexboxを使用して柔軟性を高めようとしましたが、まだ動作していません。画面の解像度に応じて、スライダ内の要素をまとめてサイズを変更するにはどうすればよいですか？

Answer 1

次の2つのfollwongにaplyingされているスタイルは、応答ネス

<div><p style=" font-family:'Aleo'; color: #4e4c4a; font-size: 1em; top:-30px; position:relative; ">AR111</p><p style=" font-family:'Aleo'; color: #4e4c4a; font-size: 2vw; top:-80px; position:relative; ">Description of the product enters here <br> approximately 2 lines</p></div> 

を壊している

トップは使用しないでください：-80pxを。ポジション：相対;上：-30px。ポジション：相対;

この2つのpブロックで自分のスタイルをすべて削除し、その作業を確認してからスタイルを1つずつ適用してみてください。