jquery - 响应式 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 来提供更大的灵 active ，但仍然无法正常工作。我如何完成 slider 内的元素以根据屏幕分辨率一起调整大小？

Answer 1

你在后面两个上应用的样式破坏了响应能力

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

不要使用top:-80px;职位:相对；和顶部:-30px；职位:相对；因为它没有响应

尝试删除这两个 p block 中的所有样式并查看其工作情况，然后一个一个地应用样式。