在bootstrap轮播中全屏扩展图像/防止延伸超过视口

时间:2015-03-13 03:09:56

标签: css twitter-bootstrap carousel fullscreen

我正在使用最新版本的bootstrap。我有一个全屏旋转木马,里面有垂直居中的内容,2个问题:

  1. 我无法一直扩展图像,我在代码的某个地方错过了height:100%;我确信它但我无法弄清楚它应该在哪里!

    编辑:我遇到的另一个问题是让我的.carousel-content课程也延长全屏(因此内容是垂直居中的)如果滑块上有固定的高度,这是有效的但它只是在全屏版本的顶部对齐

  2. 我的全屏旋转木马没有将导航栏考虑在内,因此它会延伸到视口之外。我能够通过添加margin-top:-121px;(我的导航/标题的高度)来解决这个问题,但这不是我喜欢的修复,因为图像的121px隐藏在标题下。

  3. 更新了小提琴:http://jsfiddle.net/bwupc7g6/1/

    如果有人可以看一下,我相信这对其他用户也很有用。

1 个答案:

答案 0 :(得分:1)

.carousel-inner .item div {
  height:100%;
}

我建议您为该div使用正确的类名,因为它没有。>