简体繁体 English

如何调整Bootstrap轮播的CSS响应度

[英]How to adjust CSS responsiveness of Bootstrap carousel

原文 2018-08-07 02:26:36 8 1 html/ css/ wordpress/ twitter-bootstrap/ bootstrap-4

I just installed a Bootstrap theme on my Wordpress page and try to adjust the CSS to a certain degree. 我刚刚在Wordpress页面上安装了Bootstrap主题，并尝试将CSS调整到一定程度。

One of my problems is related to the carousel. 我的问题之一与轮播有关。 At the moment, when I resize my website (or look at it on a mobile device),... 目前，当我调整网站大小（或在移动设备上查看）时，...

The carousel maintains a really large height (resulting in me only seeing a very small part as it reduces to a square on the mobile screen) 轮播会保持很高的高度（导致我只能看到很小的一部分，因为它在移动屏幕上缩小为正方形）
The caption disappears 字幕消失

How can I adjust these two aspects. 我该如何调整这两个方面。 I would like the height to decrease at smaller screen sizes, so the original dimensions can be maintained better. 我希望在较小的屏幕尺寸下降低高度，以便可以更好地保持原始尺寸。 Also, I would like to keep the caption (probably at a smaller font size though). 另外，我想保留标题（不过可能要使用较小的字体）。

I looked through various websites, found some stackoverflow questions and this website, but couldn't solve my problems. 我浏览了各种网站，发现了一些stackoverflow问题和该网站，但无法解决我的问题。

Can anyone help? 有人可以帮忙吗？

Thanks 谢谢

1 个解决方案

You should use media queries in your CSS to change the height of the carousel and the font size at different breakpoints. 您应该在CSS中使用媒体查询，以在不同的断点处更改轮播的高度和字体大小。 Or, if you're using Bootstrap, have you tried adding in the breakpoints to the html classes? 或者，如果您使用的是Bootstrap，是否尝试过将断点添加到html类中？