静态导航栏下的Bootstrap轮播图像

Question

我的网站：http://cyrusjan.com/

在较小分辨率的屏幕（移动设备）下，我的轮播图像显示在导航栏下方。有关如何将它们卡在导航栏下面的任何想法？与我的其他2张图片相比，我的第3张图片的长度也较小。如何让我的页脚卡在我的旋转木马下面，以便中间没有任何额外的空白区域？

http://i.stack.imgur.com/lOTUd.png

Answer 1

为您的#myCarousel元素添加偏移量：

#myCarousel {
    position: relative;
    margin-top: 51px;
}

此外，导航栏折叠宽度低于198px。我会为您的导航栏和正文设置一个最小宽度以防止这种情况（但您也可以使用媒体查询将您的#myCarousel margin-top样式更改为101px）。

body {
    min-width: 200px;
}

div.navbar {
    min-width: 200px;
}

对于页脚，将其位置设置为相对并删除“bottom：0;”风格。

.footer {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: #0072b1;
}

至于你的图片，你要么必须将它们调整为一致，要么将它们缩放到容器中。

Answer 2

关于滑块位于导航栏下方，应注意全屏也是如此。解决方案如下：

#myCarousel {
  margin-top:51px;
}

关于第3张图像的高度，3幅图像的尺寸（高度和宽度）不一样。在响应模式下，滑块将调整每个图像的大小以适应宽度。这可以在您的旋转木马的JavaScript设置中修复，也可以通过放置相同宽度和高度的图像来修复。