Question

我在这个网站上工作，我有3个问题。

如何让旋转木马箭头贴在屏幕上的左右两侧？
如何让旋转木马图像具有固定高度（800px），并填充屏幕宽度，在调整大小时不扭曲（挤压）它？我想隐藏一部分比屏幕更宽的图像。
当窗口调整大小低于939px时，来自2 col-md-6＆的文本正在消失，如何解决这个问题？

以下是指向该网站的链接：http://palete.co.rs/squareb

Answer 1

问题2）

.carousel-inner > .item > img {
    height: 800px;
    width: auto;
    max-width: auto;
}

Bootstrap设置max-width:100%这就是问题所在。（Tipp：使用浏览器的开发人员工具检查元素，看看已经为他们设置了哪些CSS。例如the developer tools of firefox）

Answer 2

我找到了问题1和2的解决方案。

1）

HTML

<a class="slide-prev hidden-xs" href="#myCarousel" data-slide="prev"><img src="img/white-slide-prev.png" alt="slide previous"/></a>

<a class="slide-next hidden-xs" href="#myCarousel" data-slide="next"><img src="img/white-slide-next.png" alt="slide next"/></span></a>

CSS

.slide-prev {
    position:absolute;
    top:400px;
    left:0;
    z-index:100;
}

.slide-next {
    position:absolute;
    top:400px;
    right:0;
    z-index:100;
}

2）

CSS

.carousel-inner > .item img {
    min-height:100%;
    min-width:1024px;
    height:auto;
    width:100%;
}

.carousel-inner > .item {
    height:800px !important;
    overflow:hidden;
}

当我弄清楚时，我会将解决方案发布到第3个问题。

Bootstrap轮播箭头到屏幕边缘，调整大小，文本消失

2 个答案: