jquery - 静态导航栏下的 Bootstrap 轮播图片

Question

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

在较小分辨率的屏幕(移动设备)下，我的旋转木马图像出现在导航栏下方。关于如何让它们卡在导航栏下方的任何想法？与我的其他 2 张图片相比，我的第 3 张图片的长度也更小。如何让我的页脚卡在我的轮播下面，这样中间就没有多余的空白了？

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

Answer 1

为您的#myCarousel 元素添加一个偏移量:

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

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

body {
    min-width: 200px;
}

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

至于页脚，将其位置设置为 relative 并删除“bottom: 0;”风格。

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

至于您的图像，您要么必须调整它们的大小以保持一致，要么使它们缩放到您的容器。