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

您aplying上follwong两个样式打破响应内斯

<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;位置：相对;因为它没有响应

尝试删除这两个p块中的所有样式，并查看其工作方式，然后逐个应用样式。