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塊中的所有樣式，並查看其工作方式，然後逐個應用樣式。