如何使 Bootstrap 中的轮播标题响应式？

Question

我一直在尝试让 Bootstrap 3.2 中的轮播具有响应性。但我似乎无法让我的标题与轮播中的图像一起调整大小。我认为这与“item”类以及它不随浏览器调整大小有关。我认为这可能与 有关@media，但如果是的话，我不知道该放什么。

这是正在发生的事情。

这是我的基本 HTML 轮播幻灯片：

<div class="item">
    <img src="http://goo.gl/PK4Kkh" alt="Third Slide">
    <div class="carousel-caption">
        <h1>Test</h1>
        <p>Test</p>
        <p><a class="btn btn-lg btn-primary" href="#button3" role="button">Button 3</a></p>
    </div> <!-- End of Carousel Caption -->
</div> <!-- End of Item -->

还有我的CSS：

.carousel
{
    height: 720px;
    margin-bottom: 0px;
}

.carousel-caption
{
    z-index: 10;
}

.carousel .item
{
    height: 720px;
    background-color: #777;
}

.carousel-inner > .item > img
{
    position: absolute;
        top: 51px;
        left: 0;
    min-width: 100%;
}

Answer 1

问题不在于轮播没有响应。问题是您的旋转木马和旋转木马项目的高度是固定的。您需要提供比现在更多的代码。从技术上讲，您提供的代码并不是轮播。如果您希望背景图像占据整个屏幕，则应将其设置为 100% 高度。

如果您想要实现的是全宽/高度轮播，请查看http://www.bootply.com/89646

在平板电脑/移动设备中，如果只是空间未正确填充的问题，您可以使用媒体查询来覆盖这些断点处的项目、轮播和图像的高度。