Question

我一直在尝试让我的Bootouse在Bootstrap 3.2响应。但我似乎无法用我的旋转木马中的图像来调整我的标题。我认为它与“item”类有关，以及它如何不随浏览器调整大小。我认为这可能与@media有关，但如果确实如此，我不知道该放什么。

Here is what's going on.

这是我的基本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

在平板电脑/手机中，如果只是空间没有正确填充，您可以使用媒体查询来覆盖项目的高度以及这些断点处的轮播和图像。

Answer 2

我使用这样的响应字幕：

<script>
  $(document).ready(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });

  $(window).resize(function() {
    $('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
  });
</script>

其中1250是完整模式下滑块的最大像素宽度。

如果按坐标定位标题，请使用百分比。如果您想支持所有浏览器，请参阅complete styles for cross browser CSS zoom和http://caniuse.com/#search=zoom。

Answer 3

这些人。您需要我的朋友是一组媒体查询，这将使您可以完全控制每个屏幕，桌面，平板电脑和移动设备上的轮播元素。实际上，文本默认情况下会缩放。在学习HTML之后直接潜入引导程序非常雄心勃勃 - 公平竞争。

这些链接可能有所帮助。我还建议你在使用LESS时越来越好，因为这样可以更快地进行开发。

http://www.revillweb.com/tutorials/bootstrap-tutorial/

http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/

如何在Bootstrap响应中制作轮播标题？

3 个答案: