我有一个Twitter引导程序轮播在我的网页上工作得很好,但我不能让侧箭头表现我想要的方式.我的CSS知识可能是10分中的5分.
目前,“字形”箭头绝对位于窗口的左右边缘.当我缩小或增大窗口时,这些箭头与窗口边缘保持完全相同的距离.这是奇怪和错误的,因为它们遍布旋转木马图像的顶部.我希望它们保持在旋转木马图像上的固定位置,而不是在浏览器窗口上.此外,我需要将字体字形更改为透明图像.
左键和右箭头在单击时滚动旋转木马.它们不是图像,它们是字形,我猜它是某种奇怪的字体.这是HTML：
<a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"><span class="glyphicon glyphicon-chevron-right"></span></a>
这是href的css：
.carousel-control {
background: #343432;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0.6);
这是内跨的css：
.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
和：
.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
虽然它没有在原始html中显示,但在查看Chrome开发工具栏检查器时,在跨度内我看到了：
::before
因此,我需要知道如何更改箭头位置以保持相对于轮播图像而不是浏览器窗口的固定.我需要将字形更改为我拥有的一些透明箭头.
这是实际的网页,以防您想要检查任何元素：
http://www.zerogravpro.com/temp/bootstrap/
谢谢.
解决方法
我已在
JSFIDDLE中复制了您的代码以重新创建问题.
你有这样的结构：
<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"></div> <a href="#myCarousel" class="left carousel-control"></a> <a href="#myCarousel" class="right carousel-control"></a> </div>
其中a标签是导航箭头,并且相对于其容器#myCarousel而言是绝对的.内部跨距的实际位置使箭头远离边缘.
由于容器#myCarousel始终使用屏幕调整大小,因此箭头始终可见,并且可以达到以下限制：
<a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>
>然后在CSS上添加：
.carousel-control {
top:50%;
width:auto;
height:1em;
background:transparent;
}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {
position:static;
display:block;
width:auto;
}
.carousel-control .glyphicon-chevron-left:before {
margin-left:0;
}
现在你有了THIS RESULT
现在要将箭头更改为图像,您可以重置之前伪元素的内容,而是将图像添加为背景,如下所示：
.carousel-control .glyphicon-chevron-right:before {
//Reset the icon
content: " ";
//Give layout
display:block;
//Your image as background
background:url('http://yourarrow.png') no-repeat;
//To show full image set the dimensions
width:30px;
height:30px;
}
现在你可以拥有THIS RESULT
